/* ==========================================================================
   BURSABIL HERO 2026 — vitrin + hizli erisim + alan adi sorgusu. ICERIK ORIJINAL: slayt metinleri (gorsellerden birebir
   okundu), slayt baglantilari, sag sekme metin/baglantilari, alan adi formu (action, token, tlds[], domain, SORGULA).
   Her slaytin orijinal rengi ortak koyu zeminde o slayta ozgu isik olarak yasar.
   ========================================================================== */
.hv, .hv * { box-sizing: border-box; }
.hv { --hv-zemin: #0C1B2A; --hv-zemin-2: #10273A; --hv-yazi: #F2F6FA; --hv-soluk: #A8B8C8; --hv-cizgi: rgba(255,255,255,.10);
  --hv-yesil: #2A9142; --hv-vurgu: #2E9BD6; font-family: "Onest", "Segoe UI", system-ui, sans-serif; width: 1000px; margin: 22px auto 0; color: var(--hv-yazi); -webkit-font-smoothing: antialiased; }
.hv a { text-decoration: none; }
.hv :focus-visible { outline: 2px solid #7FD3A0; outline-offset: 3px; border-radius: 10px; }
.hv-kart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 0; height: 372px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--hv-zemin-2), var(--hv-zemin) 60%); box-shadow: 0 30px 60px -36px rgba(12,27,42,.75), 0 0 0 1px rgba(12,27,42,.06); isolation: isolate; }
/* slayta ozgu isik (orijinal slayt rengi) */
.hv-isik { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background .9s ease; }
/* ince ag dokusu: veri merkezi zemini */
.hv-kart::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(90% 90% at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(90% 90% at 30% 40%, #000, transparent 75%); }

/* VITRIN */
.hv-vitrin { position: relative; min-width: 0; }
.hv-slayt { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; padding: 40px 28px 64px 44px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s .6s; }
.hv-slayt.hv-etkin { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.hv-metin { min-width: 0; }
.hv-rozet { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--hv-cizgi);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #DCE6EF; }
.hv-rozet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-renk, #2E9BD6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hv-renk, #2E9BD6) 25%, transparent); }
.hv-ust { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--hv-soluk); max-width: 46ch; }
.hv-baslik { margin: 8px 0 0; font-size: 38px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; text-wrap: balance; max-width: 15ch; }
.hv-baslik a { color: inherit; }
.hv-baslik a::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* tum slayt orijinal baglantisina gider */
.hv-vurgu { position: relative; z-index: 1; margin-top: 20px; pointer-events: none; }
.hv-fiyat { display: flex; align-items: baseline; gap: 8px; }
.hv-fiyat b { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--hv-renk-acik, #fff); font-variant-numeric: tabular-nums; }
.hv-fiyat sub { font-size: 16px; font-weight: 600; color: var(--hv-renk-acik, #fff); vertical-align: baseline; bottom: 0; }
.hv-fiyat span { font-size: 15px; color: #DCE6EF; }
.hv-cip { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.hv-cip li { list-style: none; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--hv-cizgi); font-size: 13px; color: #E4ECF3; }
.hv-cip li.hv-cip-guclu { background: color-mix(in srgb, var(--hv-renk) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hv-renk) 55%, transparent); color: #fff; font-weight: 600; }
.hv-ifade { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.hv-ifade::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--hv-renk); }
.hv-cizim { position: relative; z-index: 1; justify-self: end; width: 190px; pointer-events: none; }
.hv-cizim svg { display: block; width: 100%; height: auto; overflow: visible; }

/* sayfalama: 5 slayt, etkin olanin ilerleme cizgisi dolar */
.hv-sayfa { position: absolute; left: 44px; bottom: 26px; z-index: 2; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hv-sayfa button { position: relative; width: 34px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.18); cursor: pointer; overflow: hidden; }
.hv-sayfa button::before { content: ""; position: absolute; inset: -10px -2px; }   /* dokunma alani */
.hv-sayfa button i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: 4px; }
.hv-sayfa button[aria-current="true"] i { animation: hvDolum var(--hv-sure, 7s) linear forwards; }
.hv-kart.hv-durdu .hv-sayfa button[aria-current="true"] i { animation-play-state: paused; }
@keyframes hvDolum { to { width: 100%; } }

/* HIZLI ERISIM (eski sag sekmeler) */
.hv-hizli { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; margin: 0; padding: 14px 14px 14px 0; list-style: none; }
.hv-hizli a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; padding: 0 14px; border-radius: 14px;
  background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px var(--hv-cizgi); color: #fff; transition: background-color .18s, box-shadow .18s, transform .18s; }
.hv-hizli a:hover { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transform: translateX(-2px); }
.hv-hizli i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: var(--hv-ikon, #2E9BD6); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.hv-hizli i svg { width: 20px; height: 20px; }
.hv-hizli b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.hv-hizli small { display: block; margin-top: 2px; font-size: 12px; color: var(--hv-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ALAN ADI SORGUSU */
.hv-sorgu { display: grid; grid-template-columns: auto minmax(0, 1fr) 330px; align-items: center; gap: 20px; margin-top: 14px; padding: 14px 14px 14px 22px; border-radius: 18px; background: #fff;
  box-shadow: 0 18px 40px -30px rgba(12,27,42,.6), 0 0 0 1px rgba(12,27,42,.07); color: #16222D; }
.hv-sorgu-ad { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #16222D; white-space: nowrap; }
.hv-sorgu-ad svg { width: 20px; height: 20px; color: #C43D3D; }
.hv-uzanti { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.hv-uzanti label { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; background: #F3F5F7; box-shadow: inset 0 0 0 1px #E1E6EA;
  font-size: 13px; font-weight: 500; color: #4A5866; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; user-select: none; }
.hv-uzanti input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hv-uzanti label:hover { color: #16222D; box-shadow: inset 0 0 0 1px #CBD3DA; }
.hv-uzanti input:checked + span { color: #fff; }
.hv-uzanti label:has(input:checked) { background: #16222D; box-shadow: none; color: #fff; }
.hv-uzanti label:has(input:focus-visible) { outline: 2px solid #2A9142; outline-offset: 2px; }
.hv-ara { display: flex; align-items: center; height: 46px; padding: 4px 4px 4px 14px; border-radius: 12px; background: #F3F5F7; box-shadow: inset 0 0 0 1px #E1E6EA; transition: box-shadow .15s, background-color .15s; }
.hv-ara:focus-within { background: #fff; box-shadow: inset 0 0 0 1px #2A9142, 0 0 0 4px rgba(42,145,66,.14); }
.hv-ara svg { width: 18px; height: 18px; flex: none; color: #8C98A4; }
.hv-ara input[type=text] { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; font: 500 15px/1 inherit; font-family: inherit; color: #16222D; }
.hv-ara input[type=text]:focus { outline: none; }
.hv-ara input[type=text]::placeholder { color: #8C98A4; font-weight: 400; }
.hv-ara input[type=submit] { height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: #2A9142; color: #fff; font: 700 13px/1 inherit; font-family: inherit; letter-spacing: .04em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: background-color .15s; }
.hv-ara input[type=submit]:hover { background: #237A37; }

/* LED: sunucu cizimindeki disk isiklari — ara ara duzensiz kirpisir (renkle; sekil bozulmaz) */
.hv-led { animation: hvLed 9s steps(1, end) infinite; }
.hv-led:nth-of-type(2n) { animation-delay: -3.1s; } .hv-led:nth-of-type(3n) { animation-delay: -5.7s; }
@keyframes hvLed { 0%, 58% { fill: #3DDC84; } 60% { fill: #1E5A3A; } 62% { fill: #3DDC84; } 64% { fill: #1E5A3A; } 66%, 86% { fill: #3DDC84; } 88% { fill: #1E5A3A; } 90%, 100% { fill: #3DDC84; } }
@media (prefers-reduced-motion: reduce) { .hv-slayt, .hv-isik, .hv-hizli a { transition: none !important; } .hv-led, .hv-sayfa button i { animation: none !important; } .hv-sayfa button[aria-current="true"] i { width: 100%; } }
/* olculdu: 8 uzanti hapi 444px'e sigmiyor (.net.tr alt satira dusuyordu) -> arama 300px, hap dolgusu dar; hero ile paketler arasi bosluk 0'di */
.hv { margin-bottom: 20px; }
.hv-sorgu { grid-template-columns: auto minmax(0, 1fr) 300px; gap: 16px; }
.hv-uzanti { flex-wrap: nowrap; gap: 5px; }
.hv-uzanti label { padding: 0 9px; }

/* 2026-10-24 genis kap (--bb-kap ~1440px): hero olculeri buyuk sutuna gore */
.hv { width: var(--bb-kap, 1000px); }
.hv-kart { grid-template-columns: minmax(0, 1fr) 330px; height: 420px; }
.hv-slayt { grid-template-columns: minmax(0, 1fr) 280px; padding: 48px 40px 70px 56px; }
.hv-sayfa { left: 56px; bottom: 30px; }
.hv-baslik { font-size: 48px; max-width: 16ch; }
.hv-ust { font-size: 16px; max-width: 56ch; }
.hv-fiyat b { font-size: 56px; }
.hv-cizim { width: 250px; }
.hv-hizli { padding: 16px 16px 16px 0; gap: 10px; }
.hv-sorgu { grid-template-columns: auto minmax(0, 1fr) 420px; padding: 16px 16px 16px 24px; }
.hv-uzanti { gap: 8px; }
.hv-uzanti label { padding: 0 13px; }
@media (max-width: 1240px) { .hv-kart { grid-template-columns: minmax(0, 1fr) 280px; } .hv-slayt { grid-template-columns: minmax(0, 1fr) 200px; } .hv-cizim { width: 180px; } .hv-baslik { font-size: 40px; } .hv-sorgu { grid-template-columns: auto minmax(0, 1fr) 320px; } .hv-uzanti { flex-wrap: wrap; } }
/* 2026-10-24 canli tuval katmani (tuval.js): zemin isigi ile metin arasinda */
.hv-tuval { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hv-vitrin, .hv-hizli { position: relative; z-index: 1; }
.hv-cizim svg { transition: filter .18s ease; filter: drop-shadow(0 0 calc(var(--hv-varis, 0) * 14px) color-mix(in srgb, var(--hv-renk) 70%, transparent)); }