/* HandyCafe Wi-Fi Manager ürün sayfası - hotspot.php
   Kaynak: mockups/wifi-manager-otel-2026-10.html (onaylı, 17 Ekim 2026).
   wifi.css'ten yalnız kullanılan taban kurallar aşağıda kopyalı; wifi.css bu sayfada yüklenmez.
   Sayfa sınıfları hs- önekli; wifi.css'teki .faq, .phone, .receipt gibi sınıflarla çakışmaz.
   Ürün önizlemeleri (uygulama penceresi, paneller, telefonlar, fiş) iki temada da açık kalır;
   renkleri gateway-manager/src/app.css açık temasından. */
/* Taban: wifi.css'ten yalnız bu sayfanın kullandığı kurallar (belirteçler, gövde, .btn, .rtl-flip).
   wifi.css artık bu sayfada yüklenmiyor; oradaki taban değişirse burası da güncellenmeli. */
:root{
  color-scheme:light;
  --bg:#fafafa; --surface:#ffffff; --line:rgba(24,24,27,.12); --line-strong:rgba(15,118,110,.3);
  --text:#18181b; --teal:#0f766e; --teal-hover:#115e59; --teal-ink:#ffffff;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
html.dark{
  color-scheme:dark;
  --bg:#09090b; --surface:#18181b; --line:rgba(255,255,255,.08); --line-strong:rgba(79,182,165,.35);
  --text:#fafafa; --teal:#4fb6a5; --teal-hover:#6cc4b5; --teal-ink:#042f2e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--line-strong) var(--bg)}
body.hc-wifi-page,html.dark body.hc-wifi-page{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--teal-ink)}
.wrap{position:relative;max-width:1232px;margin-inline:auto;padding-inline:16px}
.hc-wifi :is(h1,h2,h3){margin:0;line-height:1.12;text-wrap:balance}
:where(.hc-wifi) p{margin:0}
:where(.hc-wifi) a{color:inherit;text-underline-offset:3px}
[dir="rtl"] .rtl-flip{display:inline-block;transform:scaleX(-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:48px;font:700 15px/1.2 var(--sans);padding:13px 22px;border-radius:12px;text-decoration:none;border:1px solid transparent;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn-primary{background:var(--teal);color:var(--teal-ink)}
.btn-primary:hover{background:var(--teal-hover);transform:translateY(-2px)}
.btn-line{border-color:var(--line);background:var(--surface);color:var(--text)}
.btn-line:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.hc-wifi a:focus-visible,.hc-wifi button:focus-visible,.hc-wifi summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
html.dark .btn-primary,html.dark .btn-primary:hover{box-shadow:none}
html.dark body.hc-wifi-page .hc-pro-footer-glow{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

html:not(.dark) body.hc-hs-page{background:#fff}
.hc-hs{
  --hs-ink:#0b1220; --hs-body:#334155; --hs-muted:#5b6b7f; --hs-line:#e5eaf0; --hs-line-2:#d6e0e6;
  --hs-band:#f5f8fa; --hs-tint:#eef8f6; --hs-teal-50:#e9f6f3; --hs-surface:#fff;
  --hs-shadow-float:0 2px 6px rgba(11,18,32,.06),0 22px 44px -22px rgba(11,18,32,.38);
  --hs-shadow-panel:0 1px 2px rgba(11,18,32,.06),0 16px 36px -18px rgba(11,18,32,.26);
  --hs-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --a-bg:#f4f4f5; --a-surface:#fff; --a-border:#e4e4e7; --a-text:#18181b; --a-muted:#67676f; --a-rail:#fafaf9; --a-rail-line:#e7e5e4;
  --a-teal:#0f766e; --a-teal-hover:#0b5e57;
  --a-ok:#047857; --a-ok-bg:#ecfdf5; --a-warn:#b45309; --a-warn-bg:#fffbeb; --a-bad:#b91c1c; --a-bad-bg:#fef2f2; --a-idle:#52525b; --a-idle-bg:#f4f4f5;
  color:var(--hs-ink);font-family:var(--sans);font-size:17px;line-height:1.65;
}
html.dark .hc-hs{
  --hs-ink:#fafafa; --hs-body:#d4d4d8; --hs-muted:#a1a1aa; --hs-line:rgba(255,255,255,.08); --hs-line-2:rgba(255,255,255,.14);
  --hs-band:#0f0f11; --hs-tint:rgba(79,182,165,.09); --hs-teal-50:rgba(79,182,165,.14); --hs-surface:#18181b;
  --hs-shadow-panel:0 1px 2px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.8);
}
.hc-hs .wrap{max-width:1200px;padding-inline:24px}
@media (max-width:640px){.hc-hs .wrap{padding-inline:18px}}
.hc-hs .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hc-hs section{padding-block:112px;scroll-margin-top:88px}
.hc-hs .hs-band{background:var(--hs-band)}
.hc-wifi.hc-hs h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;line-height:1.04;letter-spacing:-.045em}
.hc-wifi.hc-hs h2{font-size:clamp(30px,3.8vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.036em}
.hc-wifi.hc-hs h3{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.hc-wifi.hc-hs .hs-h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.18;letter-spacing:-.03em}
.hc-hs .hs-hl{color:var(--teal)}
.hc-hs:is(:lang(ja),:lang(zh)) :is(h1,h2,h3){line-break:strict}
.hc-hs:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}
.hc-hs:lang(ko) :is(h1,h2,h3){word-break:keep-all}
.hc-hs p{text-wrap:pretty}
@media (min-width:761px){.hc-hs #hs-h1>span{display:block}}
.hc-hs :is(h1,h2,h3,p,li,summary,td,th,figcaption){overflow-wrap:break-word}
.hc-hs .hs-nb{white-space:nowrap}
.hc-hs .hs-lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--hs-body);max-width:60ch}
.hc-hs .hs-body{color:var(--hs-body);max-width:60ch}
.hc-hs .hs-small{font-size:14px;color:var(--hs-muted)}
.hc-hs .hs-head{display:grid;gap:18px;max-width:760px;margin-bottom:64px}
.hc-hs .hs-head.center{margin-inline:auto;text-align:center;justify-items:center}
.hc-hs .hs-cta{display:flex;flex-wrap:wrap;gap:12px}
.hc-hs .hs-btn-lg{min-height:54px;padding:14px 26px;font-size:17px;white-space:nowrap}
.hc-hs :is(.hs-fitpanel,.hs-tab,.hs-pbtn,.hs-plink):focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hc-hs #sss{padding-top:112px}
@media (max-width:760px){.hc-hs section,.hc-hs #sss{padding-block:76px}.hc-hs .hs-head{margin-bottom:44px}}
@media (max-width:520px){.hc-hs .hs-cta{width:100%}.hc-hs .hs-cta .btn{flex:1 1 100%;white-space:normal}}

.hc-hs .hs-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hc-hs .hs-ticks li{position:relative;padding-inline-start:30px;color:var(--hs-body)}
.hc-hs .hs-ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--hs-teal-50)}
.hc-hs .hs-ticks li::after{content:"";position:absolute;inset-inline-start:4px;top:calc(.25em + 4px);width:12px;height:12px;background:var(--teal);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
.hc-hs .hs-ticks b{color:var(--hs-ink)}

/* hero: ortalı metin, altında ürün */
.hc-hs .hs-hero{padding-block:80px 0;overflow-x:clip}
.hc-hs .hs-hero-copy{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:26px;max-width:880px;margin-inline:auto}
.hc-hs .hs-hero-copy .hs-lead{max-width:62ch}
.hc-hs .hs-hero-copy .hs-cta{justify-content:center}
.hc-hs .hs-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:15px;font-weight:600;color:var(--hs-body)}
.hc-hs .hs-trust li{display:flex;align-items:center;gap:8px}
.hc-hs .hs-trust svg{color:var(--teal);flex:none}
.hc-hs .hs-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;font-size:14.5px;font-weight:600;color:var(--hs-body)}
.hc-hs .hs-proof>span+span::before{content:"·";padding-inline:10px}
@media (max-width:800px){.hc-hs .hs-proof{flex-direction:column;align-items:center;gap:2px}.hc-hs .hs-proof>span+span::before{content:none}}
.hc-hs .hs-media{position:relative;max-width:1048px;margin:64px auto 0}
.hc-hs .hs-stage{background:var(--hs-tint);border-radius:28px 28px 0 0;padding:44px 44px 0;overflow:hidden}
@media (max-width:760px){.hc-hs .hs-hero{padding-top:48px}.hc-hs .hs-media{margin-top:44px}.hc-hs .hs-stage{padding:18px 18px 0;border-radius:20px 20px 0 0}}

/* uygulama penceresi: 960x544 px çizilir, --hs-z ile transform:scale ekran görüntüsü gibi küçülür.
   (CSS zoom değil: WebKit küçültülmüş yazıyı alt sınırda tutup pencereyi yeniden dizer.)
   İlk değeri .hs-shot içindeki satır içi betik ilk boyamadan önce yazar, sonrasını hotspot.js. */
.hc-hs .hs-shot{width:100%;overflow:hidden;height:calc(544px * var(--hs-z,1))}
.hc-hs .hs-app{width:960px;height:544px;transform:scale(var(--hs-z,1));transform-origin:top left;font:400 13px/1.45 var(--hs-ui);color:var(--a-text);background:var(--a-bg);border:1px solid var(--a-border);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 1px 2px rgba(11,18,32,.08),0 30px 60px -30px rgba(11,18,32,.45);overflow:hidden;letter-spacing:0}
[dir="rtl"] .hc-hs .hs-app{transform-origin:top right}
.hc-hs .hs-app-title{height:36px;display:flex;align-items:center;gap:8px;padding-inline:12px;background:var(--a-rail);border-bottom:1px solid var(--a-rail-line);font-size:12px;font-weight:500;color:#3f3f46}
.hc-hs .hs-app-ico{width:18px;height:18px;border-radius:5px;background:var(--a-teal);color:#fff;display:grid;place-items:center}
.hc-hs .hs-app-ico svg{width:11px;height:11px}
.hc-hs .hs-win{margin-inline-start:auto;display:flex;gap:20px;color:#71717a}
.hc-hs .hs-app-body{display:grid;grid-template-columns:84px minmax(0,1fr)}
.hc-hs .hs-rail{background:var(--a-rail);border-inline-end:1px solid var(--a-rail-line);padding:10px 8px;display:flex;flex-direction:column;gap:4px}
.hc-hs .hs-ri{display:grid;justify-items:center;gap:4px;padding:9px 4px;border-radius:10px;font-size:11px;font-weight:500;color:#3f3f46;text-align:center;line-height:1.25;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.hc-hs .hs-ri svg{width:20px;height:20px}
.hc-hs .hs-ri.on{background:var(--a-teal);color:#fff}
.hc-hs .hs-rail hr{border:0;border-top:1px solid var(--a-rail-line);margin:6px}
.hc-hs .hs-app-main{padding:20px 24px 26px;display:grid;gap:16px;align-content:start}
.hc-hs .hs-app-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hc-hs .hs-app-h{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em}
.hc-hs .hs-app-sub{display:block;font-size:12.5px;color:var(--a-muted);margin-top:2px}
.hc-hs .hs-app-btns{display:flex;gap:8px}
.hc-hs .hs-seg{display:inline-flex;gap:2px;background:#e9e9ec;border-radius:9px;padding:3px;justify-self:start}
.hc-hs .hs-seg>span{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:500;color:var(--a-muted)}
.hc-hs .hs-seg>span.on{background:#fff;color:var(--a-text);box-shadow:0 1px 2px rgba(24,24,27,.12)}
.hc-hs .hs-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hc-hs .hs-kpis div{background:var(--a-surface);border:1px solid var(--a-border);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.hc-hs .hs-kpis small{font-size:11.5px;color:var(--a-muted)}
.hc-hs .hs-kpis b{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hc-hs .hs-ubtn{display:inline-flex;align-items:center;gap:6px;background:var(--a-teal);color:#fff;border-radius:8px;padding:7px 12px;font:600 12.5px var(--hs-ui);white-space:nowrap}
.hc-hs .hs-ubtn.ghost{background:#fff;color:var(--a-text);border:1px solid #d4d4d8}

/* özellik satırlarındaki ürün panelleri */
.hc-hs .hs-ui{font:400 13.5px/1.45 var(--hs-ui);color:var(--a-text);background:var(--a-surface);border:1px solid var(--a-border);border-radius:12px;box-shadow:var(--hs-shadow-panel);overflow:hidden;letter-spacing:0;width:100%}
.hc-hs .hs-ui.hs-flat{box-shadow:none}
.hc-hs .hs-ui-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:13px 16px;border-bottom:1px solid var(--a-border)}
.hc-hs .hs-ui-head b{font-weight:600;font-size:14.5px}
.hc-hs .hs-ui-head small{font-size:12px;color:var(--a-muted)}
.hc-hs .hs-ui-sec{padding:12px 16px 4px;font-size:12px;font-weight:600;color:var(--a-muted)}
.hc-hs .hs-ut{width:100%;border-collapse:collapse}
.hc-hs .hs-ut th{font-size:11.5px;font-weight:500;color:var(--a-muted);text-align:start;padding:9px 14px;background:#fafafa;border-bottom:1px solid var(--a-border);white-space:nowrap}
.hc-hs .hs-ut td{padding:10px 14px;border-bottom:1px solid #f0f0f2;white-space:nowrap;font-variant-numeric:tabular-nums}
.hc-hs .hs-ut tr:last-child td{border-bottom:0}
.hc-hs .hs-ut.hs-compact .hs-sm{display:none}
.hc-hs .hs-code{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.hc-hs .hs-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.hc-hs .hs-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hc-hs .hs-pill.ok{background:var(--a-ok-bg);color:var(--a-ok)}
.hc-hs .hs-pill.warn{background:var(--a-warn-bg);color:var(--a-warn)}
.hc-hs .hs-pill.bad{background:var(--a-bad-bg);color:var(--a-bad)}
.hc-hs .hs-pill.idle{background:var(--a-idle-bg);color:var(--a-idle)}
.hc-hs .hs-dev{display:inline-flex;align-items:center;gap:8px}
.hc-hs .hs-dev svg{color:var(--a-muted);flex:none}
.hc-hs .hs-cats{list-style:none;margin:0;padding:4px 16px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.hc-hs .hs-cats li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f0f0f2}
.hc-hs .hs-cats li>span{min-width:0;overflow-wrap:anywhere}
.hc-hs .hs-sw{width:30px;height:18px;border-radius:999px;background:#d4d4d8;position:relative;flex:none}
.hc-hs .hs-sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hc-hs .hs-sw.on{background:var(--a-teal)}
.hc-hs .hs-sw.on::after{inset-inline-start:14px}
.hc-hs .hs-ui-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fafafa;border-top:1px solid var(--a-border);font-size:12.5px;color:var(--a-muted)}
.hc-hs .hs-lines{list-style:none;margin:0;padding:6px 16px 12px;display:grid}
.hc-hs .hs-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f2}
.hc-hs .hs-lines li:last-child{border-bottom:0}
.hc-hs .hs-lines b{font-weight:600}
.hc-hs .hs-lines small{display:block;font-size:12px;color:var(--a-muted)}
.hc-hs .hs-lat{font-size:12.5px;color:var(--a-muted);font-variant-numeric:tabular-nums}
.hc-hs .hs-meter{grid-column:1/-1;height:6px;border-radius:99px;background:#ececef;overflow:hidden}
.hc-hs .hs-meter i{display:block;height:100%;border-radius:inherit;background:var(--a-teal)}
.hc-hs .hs-kv{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr);gap:1px;background:var(--a-border);border:1px solid var(--a-border);border-radius:10px;overflow:hidden;margin:12px 16px 0}
.hc-hs .hs-kv>span{background:#fff;padding:8px 10px;font-size:11.5px;color:var(--a-muted);display:grid;gap:1px;overflow-wrap:anywhere}
.hc-hs .hs-kv b{font:600 12.5px var(--mono);color:var(--a-text)}
.hc-hs .hs-hit{margin:10px 16px 14px;padding:10px 12px;border-radius:10px;background:var(--a-ok-bg);display:grid;gap:1px}
.hc-hs .hs-hit b{font-weight:600}
.hc-hs .hs-hit small{font:12px var(--mono);color:var(--a-muted)}

/* misafir telefonu (her iki temada açık) */
.hc-hs .hs-device{position:absolute;inset-inline-end:-36px;bottom:-100px;width:208px;z-index:3}
.hc-hs .hs-phone{background:#0b1220;border-radius:40px;padding:10px;box-shadow:var(--hs-shadow-float)}
.hc-hs .hs-screen{background:#fff;color:#0b1220;border-radius:31px;overflow:hidden;min-height:372px;display:flex;flex-direction:column;font-family:var(--sans)}
.hc-hs .hs-sbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 6px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.hc-hs .hs-sbar i{width:64px;height:19px;border-radius:12px;background:#0b1220;display:block}
.hc-hs .hs-pbrand{display:flex;align-items:center;gap:8px;padding:10px 16px 0;font-weight:800;font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.hc-hs .hs-pl{width:30px;height:30px;border-radius:9px;background:var(--a-teal);color:#fff;display:grid;place-items:center;flex:none}
.hc-hs .hs-pview{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.hc-hs .hs-pview[hidden]{display:none}
.hc-hs .hs-ptitle{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hc-hs .hs-phint{font-size:13px;color:#5b6b7f;line-height:1.45}
.hc-hs .hs-pcode{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px}
.hc-hs .hs-pcode>span{border:1.5px solid #d3dbe3;border-radius:10px;padding:10px 6px;text-align:center;font:600 15px var(--mono);letter-spacing:.06em}
.hc-hs .hs-pbtn{appearance:none;border:0;border-radius:11px;background:var(--a-teal);color:#fff;font:800 15px var(--sans);padding:12px;text-align:center;cursor:pointer}
.hc-hs button.hs-pbtn:hover{background:var(--a-teal-hover)}
.hc-hs #hs-connect{animation:hs-ping 1.8s ease-out 1.2s 3}
@keyframes hs-ping{0%{box-shadow:0 0 0 0 rgba(15,118,110,.45)}100%{box-shadow:0 0 0 12px rgba(15,118,110,0)}}
.hc-hs .hs-pmember{margin-top:auto;text-align:center;font-size:13px;font-weight:700;color:var(--a-teal);padding-top:10px;border-top:1px solid #e5eaf0}
.hc-hs .hs-pok{width:52px;height:52px;border-radius:50%;background:var(--a-ok-bg);color:var(--a-ok);display:grid;place-items:center;margin-top:6px}
.hc-hs .hs-pstats{display:grid;gap:8px;margin:4px 0 0}
.hc-hs .hs-pstats div{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid #e5eaf0;padding-bottom:8px}
.hc-hs .hs-pstats dt{color:#5b6b7f}
.hc-hs .hs-pstats dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.hc-hs .hs-plink{appearance:none;background:none;border:0;font:700 13px var(--sans);color:#5b6b7f;cursor:pointer;align-self:center;margin-top:auto;text-decoration:underline}
.hc-hs .hs-pfield{border:1.5px solid #d3dbe3;border-radius:10px;padding:7px 10px;font-size:13.5px;font-weight:600}
.hc-hs .hs-pfield small{display:block;font-size:11px;font-weight:600;color:#5b6b7f}
.hc-hs .hs-phone.crimson .hs-pl,.hc-hs .hs-phone.crimson .hs-pbtn{background:#b4233a}
.hc-hs .hs-phone.crimson .hs-pmember{color:#b4233a}
.hc-hs .hs-phones{display:flex;justify-content:center;align-items:flex-end;gap:22px}
.hc-hs .hs-phones .hs-phone{width:206px;padding:9px;border-radius:36px;box-shadow:var(--hs-shadow-panel)}
.hc-hs .hs-phones .hs-screen{min-height:356px;border-radius:28px}
.hc-hs .hs-phones .hs-phone+.hs-phone{margin-bottom:34px}
@media (prefers-reduced-motion:reduce){.hc-hs #hs-connect{animation:none}}
@media (max-width:1140px){.hc-hs .hs-device{inset-inline-end:16px}}
@media (max-width:760px){.hc-hs .hs-device{display:none}}
@media (max-width:560px){.hc-hs .hs-phones .hs-phone+.hs-phone{display:none}}

/* ne işe yarar */
.hc-hs .hs-what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.hc-hs .hs-what-copy{display:grid;gap:20px}
.hc-hs .hs-fixes{list-style:none;margin:0;padding:0;display:grid}
.hc-hs .hs-fixes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding-block:22px;border-top:1px solid var(--hs-line-2)}
.hc-hs .hs-fixes li:last-child{border-bottom:1px solid var(--hs-line-2)}
.hc-hs .hs-ic{grid-row:span 2;color:var(--teal);padding-top:3px}
.hc-hs .hs-fixes p{color:var(--hs-body)}
@media (max-width:900px){.hc-hs .hs-what{grid-template-columns:minmax(0,1fr);gap:40px}}

/* nasıl çalışır */
.hc-hs .hs-how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center}
.hc-hs .hs-how-copy{display:grid;gap:20px}
.hc-hs .hs-steps{list-style:none;margin:12px 0 0;padding:0}
.hc-hs .hs-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding-block:22px;border-top:1px solid var(--hs-line)}
.hc-hs .hs-steps li:last-child{border-bottom:1px solid var(--hs-line)}
.hc-hs .hs-steps p{color:var(--hs-body);margin-top:4px}
.hc-hs .hs-stepno{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--teal-ink);font-weight:800;font-size:15px}
.hc-hs .hs-net{margin:0;background:var(--hs-tint);border-radius:28px;padding:40px;display:grid;gap:24px}
.hc-hs .hs-net figcaption{color:var(--hs-body);font-size:15.5px;line-height:1.6}
.hc-hs .hs-chain{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hc-hs .hs-chain li{display:grid;gap:4px}
.hc-hs .hs-node{display:flex;align-items:center;gap:12px;padding-block:12px;padding-inline:12px 16px;border-radius:14px;background:var(--hs-surface);border:1.5px solid var(--hs-line-2);font-weight:700;font-size:15.5px}
.hc-hs .hs-node.on{border-color:var(--teal);background:var(--hs-teal-50);color:var(--teal)}
.hc-hs .hs-ni{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--hs-band);color:var(--hs-body)}
.hc-hs .hs-node.on .hs-ni{background:var(--hs-surface);color:var(--teal)}
.hc-hs .hs-nt small{display:block;font-size:13px;font-weight:500;color:var(--hs-muted)}
.hc-hs .hs-node.on .hs-nt small{color:var(--teal)}
.hc-hs .hs-arr{justify-self:center;color:var(--hs-muted);transform:rotate(90deg)}
@media (max-width:960px){.hc-hs .hs-how{grid-template-columns:minmax(0,1fr);gap:48px}}
@media (max-width:640px){.hc-hs .hs-net{padding:24px 18px;border-radius:22px}}

/* özellik satırları */
.hc-hs .hs-feat{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:center}
.hc-hs .hs-feat+.hs-feat{margin-top:112px}
.hc-hs .hs-feat.flip .hs-fv{order:-1}
.hc-hs .hs-feat-copy{display:grid;gap:18px}
.hc-hs .hs-fv{position:relative;background:var(--hs-tint);border-radius:24px;padding:36px 28px}
.hc-hs .hs-fv .hs-ui{max-width:540px;margin-inline:auto}
.hc-hs .hs-receipt{position:relative;z-index:1;margin-block:-4px 0;margin-inline:auto 8%;width:196px;background:#fff;padding:16px 15px 24px;box-shadow:var(--hs-shadow-panel);font:500 12px/1.55 var(--mono);color:#1f2937;transform:rotate(-3deg);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.hc-hs .hs-receipt .c{text-align:center}
.hc-hs .hs-receipt div{text-wrap:pretty}
.hc-hs .hs-receipt .big{font-size:18px;font-weight:600;letter-spacing:.06em;margin-top:4px}
.hc-hs .hs-receipt b{font-weight:600}
[dir="rtl"] .hc-hs .hs-receipt{transform:rotate(3deg)}
.hc-hs .hs-receipt hr{border:0;border-top:1px dashed #9aa6b2;margin:7px 0}
.hc-hs .hs-lookup{position:absolute;inset-inline-start:-22px;bottom:-34px;width:330px}
@media (max-width:1100px){.hc-hs .hs-lookup{inset-inline-start:8px}}
@media (max-width:960px){
  .hc-hs .hs-feat{grid-template-columns:minmax(0,1fr);gap:32px}
  .hc-hs .hs-feat.flip .hs-fv{order:0}
  .hc-hs .hs-feat+.hs-feat{margin-top:88px}
}
@media (max-width:560px){
  .hc-hs .hs-fv{padding:18px 12px;border-radius:20px}
  .hc-hs .hs-sm{display:none}
  .hc-hs .hs-ut th,.hc-hs .hs-ut td{padding-inline:12px}
  .hc-hs .hs-cats{grid-template-columns:minmax(0,1fr)}
  .hc-hs .hs-receipt{margin:-8px auto 0;transform:rotate(-2deg)}
  [dir="rtl"] .hc-hs .hs-receipt{transform:rotate(2deg)}
  .hc-hs .hs-lookup{position:static;width:auto;margin-top:12px}
  .hc-hs .hs-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-hs .hs-kv>span:first-child{grid-column:1/-1}
}

/* tüm özellikler */
.hc-hs .hs-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 36px}
.hc-wifi.hc-hs .hs-all h3{font-size:17px;font-weight:800;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hs-line)}
.hc-hs .hs-all .hs-ticks{font-size:16px}
@media (max-width:1000px){.hc-hs .hs-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hc-hs .hs-all{grid-template-columns:minmax(0,1fr);gap:32px}}

/* kimler için */
.hc-hs .hs-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:36px}
.hc-hs .hs-tab{appearance:none;border:1.5px solid var(--hs-line-2);background:var(--hs-surface);border-radius:999px;padding:10px 18px;font:700 15px var(--sans);color:var(--hs-body);cursor:pointer}
.hc-hs .hs-tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.hc-hs .hs-tab:hover{border-color:var(--teal)}
.hc-hs .hs-fitpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hc-hs .hs-fitpanel[hidden]{display:none}
.hc-hs .hs-fitpanel .hs-h3{margin-bottom:16px}
.hc-hs .hs-fitlink{margin-top:20px;font-weight:700}
.hc-hs .hs-fitlink a{color:var(--teal)}
.hc-hs .hs-fitimg{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:16/11;background:var(--hs-line)}
.hc-hs .hs-fitimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.hc-hs .hs-fitpanel{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.hc-hs .hs-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding:6px 18px;margin-block:-6px 30px;scroll-padding-inline:18px}.hc-hs .hs-tabs::-webkit-scrollbar{display:none}.hc-hs .hs-tab{flex:none}}

/* neden biz */
.hc-hs .hs-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:16px}
.hc-hs .hs-cmp :is(th,td){text-align:start;padding:18px 20px;border-bottom:1px solid var(--hs-line);vertical-align:middle}
.hc-hs .hs-cmp thead th{font-size:14px;font-weight:700;color:var(--hs-muted);border-bottom:2px solid var(--hs-line)}
.hc-hs .hs-cmp thead td{border-bottom:2px solid var(--hs-line)}
.hc-hs .hs-cmp thead th.us{color:var(--teal);background:var(--hs-teal-50);border-radius:14px 14px 0 0}
.hc-hs .hs-cmp tbody th{font-weight:700;color:var(--hs-ink);width:24%}
.hc-hs .hs-cmp td.us{background:var(--hs-teal-50);font-weight:700;color:var(--hs-ink)}
.hc-hs .hs-cmp tbody tr:last-child td.us{border-radius:0 0 14px 14px}
.hc-hs .hs-cmp :is(.yes,.no){display:inline-flex;align-items:center;gap:10px}
.hc-hs .hs-cmp .yes svg{color:var(--teal);flex:none}
.hc-hs .hs-cmp .no svg{color:var(--hs-muted);opacity:.6;flex:none}
.hc-hs .hs-cmp td:not(.us){color:var(--hs-body)}
@media (max-width:760px){
  .hc-hs .hs-cmp thead{display:none}
  .hc-hs .hs-cmp,.hc-hs .hs-cmp tbody,.hc-hs .hs-cmp tr,.hc-hs .hs-cmp th,.hc-hs .hs-cmp td{display:block;width:100%}
  .hc-hs .hs-cmp tr{padding-block:18px;border-bottom:1px solid var(--hs-line)}
  .hc-hs .hs-cmp :is(th,td){border:0;padding:4px 0}
  .hc-hs .hs-cmp tbody th{width:auto;margin-bottom:6px}
  .hc-hs .hs-cmp td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:700;color:var(--hs-muted)}
  .hc-hs .hs-cmp td.us{background:none}
}
.hc-hs .hs-after{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;margin-top:96px;padding-top:56px;border-top:1px solid var(--hs-line)}
.hc-hs .hs-after-head{display:grid;gap:14px}
.hc-hs .hs-after-list{gap:16px}
.hc-hs .hs-after-list a{color:var(--teal)}
@media (max-width:900px){.hc-hs .hs-after{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:72px;padding-top:40px}}

/* fiyat */
.hc-hs .hs-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--hs-surface);border-radius:28px;box-shadow:var(--hs-shadow-panel);overflow:hidden;max-width:1040px;margin-inline:auto}
.hc-hs .hs-plan-main{padding:48px;display:grid;gap:16px;align-content:start}
.hc-hs .hs-plan-name{font-weight:800;font-size:18px}
.hc-hs .hs-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hc-hs .hs-price b{font-size:clamp(52px,6.4vw,78px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.hc-hs .hs-price span{font-size:20px;font-weight:700;color:var(--hs-muted)}
.hc-hs .hs-plan-sub{font-weight:700;color:var(--hs-body)}
.hc-hs .hs-plan-main .hs-cta{margin-top:12px}
.hc-hs .hs-plan-incl{padding:48px;background:var(--hs-tint);display:grid;gap:20px;align-content:start}
.hc-hs .hs-plan-incl .hs-ticks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.hc-hs .hs-start{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;max-width:1040px;margin:64px auto 0}
.hc-hs .hs-start li{display:grid;gap:8px;align-content:start;color:var(--hs-body)}
.hc-hs .hs-start b{color:var(--hs-ink);font-size:17px}
@media (max-width:900px){.hc-hs .hs-plan{grid-template-columns:minmax(0,1fr)}.hc-hs .hs-plan-main,.hc-hs .hs-plan-incl{padding:32px 24px}.hc-hs .hs-start{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:520px){.hc-hs .hs-plan-incl .hs-ticks{grid-template-columns:minmax(0,1fr)}}

/* sss */
.hc-hs .hs-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;max-width:1040px;margin-inline:auto}
.hc-hs .hs-faq details{border-bottom:1px solid var(--hs-line-2);padding-block:22px;box-sizing:border-box}
.hc-hs .hs-faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:18px}
.hc-hs .hs-faq summary::-webkit-details-marker{display:none}
.hc-hs .hs-faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hs-line-2);background:linear-gradient(var(--teal) 0 0) center/12px 2px no-repeat,linear-gradient(var(--teal) 0 0) center/2px 12px no-repeat;transition:transform .25s var(--ease)}
.hc-hs .hs-faq details[open] summary::after{transform:rotate(45deg)}
.hc-hs .hs-faq details.hs-closing summary::after{transform:none}
.hc-hs section[tabindex="-1"]:focus{outline:none}
.hc-hs .hs-faq details p{margin-top:12px;color:var(--hs-body);max-width:60ch}
@media (max-width:800px){.hc-hs .hs-faq{grid-template-columns:minmax(0,1fr)}}

/* kapanış */
.hc-hs .hs-close{padding-block:0 112px}
.hc-hs .hs-close-box{background:var(--hs-teal-50);border-radius:32px;padding:80px clamp(22px,8vw,120px);display:grid;justify-items:center;text-align:center;gap:20px}
.hc-hs .hs-close-box p{color:var(--hs-body);font-size:19px;max-width:46ch}
.hc-hs .hs-close-box .hs-cta{justify-content:center;margin-top:8px}
@media (max-width:760px){.hc-hs .hs-close{padding-block:0 76px}.hc-hs .hs-close-box{padding:56px 22px;border-radius:24px}}