/* ==========================================================================
   Hoverex — recreated theme (Bootstrap 5 based)
   ========================================================================== */

:root{
  /* JeoValid marka renkleri (JeoValid mobil uygulamasından teyit edildi) */
  --hx-bg:            #0B1628;
  --hx-bg-alt:        #0F1F35;
  --hx-bg-card:        #152A47;
  --hx-purple:        #0F766E;
  --hx-magenta:       #14B8A6;
  --hx-pink:          #38BDF8;
  --hx-cyan:          #38BDF8;
  --hx-cyan-2:        #0284C7;
  --hx-gold:          #FFD700;
  --hx-gold-2:        #B8860B;
  --hx-text:          #ffffff;
  --hx-text-muted:    #8791a8;
  --hx-border:        rgba(255,255,255,.08);
  --hx-gradient:      linear-gradient(90deg, var(--hx-purple), var(--hx-pink));
  --hx-gradient-gold: linear-gradient(90deg, var(--hx-gold-2), var(--hx-gold));
  --hx-font:          'Mulish', 'Muli', sans-serif;
}

html{scroll-behavior:smooth;}

body{
  background:var(--hx-bg);
  color:var(--hx-text);
  font-family:var(--hx-font);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--hx-font);
  font-weight:800;
  color:var(--hx-text);
  letter-spacing:.3px;
}

a{ text-decoration:none; color:var(--hx-cyan); transition:color .2s ease; }
a:hover{ color:var(--hx-pink); }

.text-muted-hx{ color:var(--hx-text-muted) !important; }

section{ position:relative; }

.hx-section{ padding:6rem 0; }
.hx-section-alt{ background:var(--hx-bg-alt); }

.hx-eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--hx-pink);
  margin-bottom:.75rem;
}

.hx-title-accent{
  text-align:center;
  position:relative;
  margin-bottom:1rem;
}

.hx-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.9rem;
  border-radius:50px;
  font-weight:700;
  font-size:.95rem;
  border:none;
  background:var(--hx-gradient);
  color:#fff !important;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow:0 10px 25px -8px rgba(20,184,166,.55);
}
.hx-btn:hover{ transform:translateY(-3px); opacity:.92; color:#fff !important; }

.hx-btn-outline{
  background:transparent;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:none;
}
.hx-btn-outline:hover{ border-color:var(--hx-cyan); background:rgba(20,184,166,.08); }

.hx-btn-sm{ padding:.55rem 1.3rem; font-size:.82rem; }

/* ---------------- Navbar ---------------- */
.hx-navbar{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  padding:1.1rem 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
  background:transparent;
}
.hx-navbar.scrolled{
  background:rgba(5,5,15,.92);
  backdrop-filter:blur(10px);
  padding:.65rem 0;
  box-shadow:0 6px 25px rgba(0,0,0,.35);
  border-bottom:1px solid var(--hx-border);
}
.hx-navbar .navbar-brand img{ height:34px; }
.hx-navbar .nav-link{
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  padding:.5rem 1rem !important;
  opacity:.85;
}
.hx-navbar .nav-link:hover,
.hx-navbar .nav-link.active{ opacity:1; color:var(--hx-pink); }

.hx-navbar .dropdown-menu{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:10px;
}
.hx-navbar .dropdown-item{ color:#dfe3ee; font-size:.9rem; }
.hx-navbar .dropdown-item:hover{ background:rgba(20,184,166,.12); color:var(--hx-cyan); }

/* Navbar'daki CTA butonu: büyük hero/bölüm butonlarındaki geniş parıltı gölgesi
   dar navbar şeridinin altındaki kesin sınır çizgisinden taşıp bulanık bir iz
   bırakıyordu; burada daha dar ve düşük bir gölgeyle sınırlandırılıyor. */
.hx-navbar .hx-btn{ box-shadow:0 4px 12px -4px rgba(20,184,166,.45); }

@media (max-width:991.98px){
  .hx-navbar .navbar-collapse{
    background:rgba(5,5,15,.97);
    backdrop-filter:blur(10px);
    border-radius:14px;
    margin-top:1rem;
    padding:1.25rem 1.5rem 1.5rem;
    border:1px solid var(--hx-border);
  }
  .hx-navbar .navbar-nav{ margin-bottom:1rem; }
  .hx-navbar .nav-link{ padding:.6rem 0 !important; }
  .hx-navbar .d-flex{ flex-wrap:wrap; }
}

/* ---------------- Navbar varyantları: indexv2 / indexv3 deneme yerleşimleri ---------------- */

/* v2 — iki katmanlı navbar: üst satırda logo + arama/giriş/indir ikonları,
   alt satırda ortalanmış menü. */
.hx-navbar-v2-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.hx-navbar-v2-bottom{ margin-top:.85rem; }
@media (max-width:991.98px){
  .hx-navbar-v2-bottom{ margin-top:0; }
}
@media (max-width:767.98px){
  .hx-navbar-v2-top{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .hx-navbar-v2-top > .d-flex{ justify-content:flex-end; }
}

/* v3 — ayna düzen: menü solda, arama/giriş/indir ikonları ortada, logo en sağda. */
.hx-navbar-v3 .navbar-nav{ margin-right:0; }
.hx-navbar-v3-actions{
  display:flex; align-items:center; gap:.5rem;
}
@media (min-width:992px){
  .hx-navbar-v3-actions{ gap:.75rem; }
}
@media (max-width:767.98px){
  .hx-navbar-v3 .container{ flex-direction:column; align-items:stretch; row-gap:.6rem; }
  .hx-navbar-v3-actions{ justify-content:flex-end; }
}

/* v2 / v3 ortak: dairesel ikon butonlar (arama, indir), giriş yap linki */
.hx-icon-btn{
  width:40px; height:40px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hx-border);
  color:#fff; font-size:1.05rem;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.hx-icon-btn:hover{ background:rgba(20,184,166,.15); border-color:var(--hx-cyan); color:var(--hx-cyan); }

.hx-icon-btn-accent{
  background:var(--hx-gradient);
  border:none;
  box-shadow:0 4px 12px -4px rgba(20,184,166,.45);
}
.hx-icon-btn-accent:hover{ color:#fff; transform:translateY(-2px); }

.hx-login-link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#fff !important; font-weight:600; font-size:.9rem; opacity:.85;
  white-space:nowrap;
}
.hx-login-link:hover{ color:var(--hx-cyan) !important; opacity:1; }
.hx-login-link i{ font-size:1.2rem; }

.hx-lang-select{
  background:transparent;
  color:#fff;
  border:1px solid var(--hx-border);
  border-radius:20px;
  font-size:.82rem;
  padding:.3rem .8rem;
}

/* ---------------- Hero ---------------- */
.hx-hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:8rem;
  padding-bottom:4rem;
  background:
    linear-gradient(180deg, rgba(5,5,15,.55) 0%, rgba(5,5,15,.85) 75%, var(--hx-bg) 100%),
    url('../images/header_home2.jpg') center / cover no-repeat;
}
.hx-hero .container{ position:relative; z-index:1; }

/* Yumuşak, yavaşça süzülen ışık lekeleri (dekoratif "show" efekti) */
.hx-hero::before,
.hx-hero::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
  animation:hx-glow-float 10s ease-in-out infinite;
}
.hx-hero::before{
  width:360px; height:360px;
  background:var(--hx-purple);
  top:-100px; left:-80px;
}
.hx-hero::after{
  width:300px; height:300px;
  background:var(--hx-pink);
  bottom:-70px; right:6%;
  animation-delay:3s;
}
@keyframes hx-glow-float{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(25px,-30px) scale(1.1); }
}

.hx-hero-subhead{
  font-family:var(--hx-font);
  font-weight:800;
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  line-height:1.25;
  color:#fff;
  margin-bottom:.5rem;
}

.hx-hero h1{
  font-size:clamp(2.2rem, 5vw, 3.8rem);
  line-height:1.18;
  margin-bottom:1.6rem;
  max-width:760px;
}
/* Dönen ana başlık: gradyan metin + parıldayan (shine) hareketli renk kayması */
#heroHeadline{
  background:linear-gradient(90deg, var(--hx-purple), var(--hx-pink), var(--hx-cyan-2), var(--hx-pink), var(--hx-purple));
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:hx-shine 6s linear infinite;
}
@keyframes hx-shine{
  0%{ background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}

/* 3 blok arasında yumuşak geçiş yapan Hero döngüsü:
   eyebrow -> başlık -> açıklama kademeli (gecikmeli) olarak sırayla belirir */
.hx-hero-rotator #heroEyebrow,
.hx-hero-rotator #heroHeadline,
.hx-hero-rotator #heroDesc{
  display:block;
  opacity:1;
  transform:translateY(0);
  transition:opacity .5s ease, transform .5s ease;
}
.hx-hero-rotator #heroEyebrow{ transition-delay:0s; }
.hx-hero-rotator #heroHeadline{ transition-delay:.15s; }
.hx-hero-rotator #heroDesc{ transition-delay:.3s; }

.hx-hero-rotator.is-out #heroEyebrow,
.hx-hero-rotator.is-out #heroHeadline,
.hx-hero-rotator.is-out #heroDesc{
  opacity:0;
  transform:translateY(14px);
  transition-delay:0s;
}

@media (prefers-reduced-motion: reduce){
  .hx-hero-rotator #heroEyebrow,
  .hx-hero-rotator #heroHeadline,
  .hx-hero-rotator #heroDesc{ transition:none; }
}

.hx-goal-card{
  background:rgba(17,24,46,.75);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:1.75rem 2rem;
  backdrop-filter:blur(6px);
  margin-top:2.5rem;
}
.hx-goal-card .goal-current{ font-size:1.4rem; font-weight:800; color:var(--hx-pink); }
.hx-goal-card .goal-total{ font-size:1.1rem; font-weight:700; }

.hx-progress{
  height:10px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin-top:.85rem;
}
.hx-progress .bar{
  height:100%;
  border-radius:20px;
  background:var(--hx-gradient);
  transition:width 1.4s ease;
}
.hx-progress-labels{
  display:flex;
  justify-content:space-between;
  font-size:.82rem;
  color:var(--hx-text-muted);
  margin-top:.5rem;
}

/* ---------------- Cards / generic ---------------- */
.hx-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
}

/* ---------------- Pie / allocation ---------------- */
.hx-pie-wrap{ position:relative; width:220px; height:220px; margin:0 auto; }
.hx-legend{ list-style:none; padding:0; margin:1.5rem 0 0; }
.hx-legend li{
  display:flex; align-items:center; gap:.65rem;
  font-size:.92rem; padding:.35rem 0; color:var(--hx-text-muted);
}
.hx-legend .dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.hx-legend .val{ margin-left:auto; font-weight:700; color:#fff; }

/* ---------------- Feature list (app section) ---------------- */
.hx-check-list{ list-style:none; padding:0; margin:0 0 2rem; }
.hx-check-list li{ display:flex; gap:1rem; margin-bottom:1.5rem; }
.hx-check-list .ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.hx-check-list strong{ display:block; color:#fff; margin-bottom:.2rem; }

.hx-store-btn{
  display:inline-flex; align-items:center; gap:.75rem;
  border:1px solid var(--hx-border);
  border-radius:12px; padding:.6rem 1.2rem;
  color:#fff; margin-right:.75rem; margin-bottom:.5rem;
}
.hx-store-btn:hover{ border-color:var(--hx-pink); color:var(--hx-pink); }
.hx-store-btn small{ display:block; font-size:.68rem; color:var(--hx-text-muted); }
.hx-store-btn span{ font-weight:700; font-size:.95rem; }

.hx-phone-figure{ position:relative; text-align:center; }
.hx-phone-figure img{ max-width:100%; filter:drop-shadow(0 25px 45px rgba(0,0,0,.5)); }

/* ---------------- Allocation summary bars ---------------- */
.hx-bar-item{ margin-bottom:1.6rem; }
.hx-bar-item .label{ display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:.5rem; color:#dfe3ee; }
.hx-bar-item .track{ height:8px; border-radius:20px; background:rgba(255,255,255,.08); overflow:hidden; }
.hx-bar-item .fill{ height:100%; border-radius:20px; background:var(--hx-gradient); width:0; transition:width 1.4s ease; }

/* ---------------- Expansion / hotspots ---------------- */
.hx-hotspot-wrap{ position:relative; display:inline-block; max-width:100%; }
.hx-hotspot-wrap img{ max-width:100%; border-radius:16px; }
.hx-hotspot{
  position:absolute;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--hx-gradient);
  color:#fff; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(20,184,166,.25);
  cursor:pointer;
  animation:hx-pulse 2.4s infinite;
}
@keyframes hx-pulse{
  0%{ box-shadow:0 0 0 0 rgba(20,184,166,.45); }
  70%{ box-shadow:0 0 0 14px rgba(20,184,166,0); }
  100%{ box-shadow:0 0 0 0 rgba(20,184,166,0); }
}

/* ---------------- Icon grid (benefits) ---------------- */
.hx-icon-box{ text-align:center; padding:1.75rem 1rem; }
.hx-icon-box .ico{
  width:64px; height:64px; margin:0 auto 1rem;
  border-radius:50%;
  border:1px solid var(--hx-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--hx-cyan);
}
.hx-icon-box h4{ font-size:1.05rem; margin:0; }

/* ---------------- Roadmap ---------------- */
.hx-roadmap{
  background:
    linear-gradient(180deg, rgba(5,5,15,.9), rgba(5,5,15,.95)),
    url('../images/roadmap_bg2.png') center/cover no-repeat;
}
.hx-timeline{
  position:relative;
  padding-left:2.5rem;
}
.hx-timeline::before{
  content:'';
  position:absolute; left:11px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--hx-purple), var(--hx-cyan));
}
.hx-timeline-item{ position:relative; padding-bottom:2.5rem; }
.hx-timeline-item:last-child{ padding-bottom:0; }
.hx-timeline-item::before{
  content:'';
  position:absolute; left:-2.5rem; top:4px;
  width:24px; height:24px; border-radius:50%;
  background:var(--hx-bg);
  border:3px solid var(--hx-cyan);
}
.hx-timeline-item h5{ color:var(--hx-cyan); font-size:1rem; margin-bottom:.35rem; }
.hx-timeline-item p{ margin:0; color:var(--hx-text-muted); }

/* ---------------- FAQ ---------------- */
.hx-accordion .accordion-item{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:12px !important;
  margin-bottom:1rem;
  overflow:hidden;
}
.hx-accordion .accordion-button{
  background:transparent; color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:none;
}
.hx-accordion .accordion-button:not(.collapsed){ color:var(--hx-cyan); background:rgba(20,184,166,.08); }
.hx-accordion .accordion-button::after{ filter:invert(1); }
.hx-accordion .accordion-body{ color:var(--hx-text-muted); font-size:.92rem; }

/* ---------------- Footer ---------------- */
.hx-footer{
  background:var(--hx-bg-alt);
  border-top:1px solid var(--hx-border);
  padding:5rem 0 2rem;
}
.hx-footer h6{
  color:#fff; font-size:.85rem; letter-spacing:1px; text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hx-footer ul{ list-style:none; padding:0; margin:0; }
.hx-footer ul li{ margin-bottom:.7rem; }
.hx-footer ul a{ color:var(--hx-text-muted); font-size:.92rem; }
.hx-footer ul a:hover{ color:var(--hx-pink); }

.hx-subscribe .form-control{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  color:#fff;
  border-radius:50px 0 0 50px;
  padding:.7rem 1.2rem;
}
.hx-subscribe .form-control:focus{ box-shadow:none; border-color:var(--hx-pink); }
.hx-subscribe .btn{
  border-radius:0 50px 50px 0;
  background:var(--hx-gradient);
  color:#fff; font-weight:700; padding:.7rem 1.4rem;
  border:none;
}

.hx-socials{ display:flex; gap:.6rem; margin-top:1.5rem; }
.hx-socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hx-border);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.hx-socials a:hover{ background:var(--hx-gradient); border-color:transparent; color:#fff; }

.hx-copyright{
  border-top:1px solid var(--hx-border);
  margin-top:3rem; padding-top:1.75rem;
  font-size:.85rem; color:var(--hx-text-muted); text-align:center;
}

/* ---------------- Back to top ---------------- */
.hx-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:1040;
  width:46px; height:46px; border-radius:50%;
  background:var(--hx-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease;
  box-shadow:0 10px 25px -8px rgba(20,184,166,.55);
}
.hx-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width:991.98px){
  .hx-hero{ padding-top:7rem; text-align:center; }
  .hx-goal-card{ text-align:left; }
  .hx-section{ padding:4rem 0; }
}

/* ---------------- JeoValid additions ---------------- */

.hx-brand{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1.3rem; font-weight:800; color:#fff !important;
}
.hx-brand i{ color:var(--hx-cyan); }
.hx-brand img{ height:34px; width:auto; }
.hx-footer-brand{ display:flex; }

.hx-highlight{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.82rem; color:var(--hx-text-muted); font-weight:600;
}
.hx-highlight i{ font-size:1.4rem; color:var(--hx-cyan); }

/* Desteklenen veri tipi kartları */
.hx-dataset-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:14px;
  padding:1.75rem 1rem;
}
.hx-dataset-card .dot{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background:var(--dot,var(--hx-cyan)); margin-bottom:.85rem;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--dot,var(--hx-cyan)) 25%, transparent);
}
.hx-dataset-card h4{ font-size:1.05rem; margin-bottom:.35rem; }

/* Yer tutucu telefon mockup (gerçek ekran görüntüsü eklenene kadar) */
.hx-phone-figure{ display:flex; justify-content:center; padding:1rem 0; }

.hx-phone-mock{
  position:relative;
  width:270px; max-width:80vw;
  aspect-ratio:9/19.3;
  margin:0 auto;
  background:linear-gradient(155deg,#1c2942,#0a1220);
  border-radius:48px;
  padding:12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 45px 70px -25px rgba(0,0,0,.65),
    0 15px 30px -12px rgba(0,0,0,.5);
}

/* Yan tuşlar */
.hx-phone-btn{ position:absolute; background:#0a1220; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; }
.hx-phone-btn.vol1{ left:-3px; top:22%; width:3px; height:38px; }
.hx-phone-btn.vol2{ left:-3px; top:32%; width:3px; height:58px; }
.hx-phone-btn.power{ right:-3px; top:26%; width:3px; height:70px; }

.hx-phone-screen{
  position:relative;
  width:100%; height:100%;
  background:linear-gradient(180deg, var(--hx-bg-alt), var(--hx-bg));
  border-radius:36px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

.hx-phone-real-shot{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Aşağıdaki statusbar/appbar/content/tabbar/mock-* stilleri artık kullanılmıyor
   (gerçek ekran görüntüsü eklendi) ama ileride yer tutucu mockup'a dönmek
   istenirse diye silinmeden bırakıldı. */
.hx-phone-island{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:84px; height:20px; background:#04070d; border-radius:20px; z-index:3;
}

.hx-phone-statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 2px; font-size:.68rem; font-weight:800; color:#fff;
}
.hx-phone-statusbar .icons{ display:flex; gap:.35rem; font-size:.72rem; }

.hx-phone-appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 6px;
}
.hx-phone-appbar .app-name{ font-weight:800; font-size:.95rem; color:#fff; letter-spacing:.2px; }
.hx-phone-appbar .app-badge{
  background:var(--hx-gradient-gold); color:#1b1400;
  font-size:.6rem; font-weight:800; letter-spacing:.5px;
  padding:.15rem .5rem; border-radius:20px;
}

.hx-phone-content{ flex:1; padding:.35rem .85rem; display:flex; flex-direction:column; gap:.5rem; overflow:hidden; }

.mock-row{
  display:flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:700; color:#dfe3ee;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px; padding:.45rem .55rem;
}
.mock-row .mock-avatar{
  width:24px; height:24px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; color:#fff;
}
.mock-row .mock-label{ flex:1; }
.mock-row .mock-status{ font-size:.62rem; font-weight:800; padding:.15rem .5rem; border-radius:20px; white-space:nowrap; }
.mock-row .mock-status.ok{ background:rgba(16,185,129,.16); color:#10B981; }
.mock-row .mock-status.warn{ background:rgba(245,158,11,.16); color:#F59E0B; }
.mock-row .mock-status.err{ background:rgba(249,115,22,.16); color:#F97316; }

.mock-3d{
  margin-top:.15rem; flex:1; min-height:56px; border-radius:14px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/12px 12px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/12px 12px,
    linear-gradient(135deg, rgba(15,118,110,.35), rgba(56,189,248,.28));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  font-size:1.5rem; color:#fff;
  border:1px solid rgba(255,255,255,.06);
}
.mock-3d span{ font-size:.62rem; font-weight:700; color:var(--hx-text-muted); }

.hx-phone-tabbar{
  display:flex; align-items:center; justify-content:space-around;
  padding:.6rem 0 .9rem;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:1.05rem; color:var(--hx-text-muted);
}
.hx-phone-tabbar .active{ color:var(--hx-cyan); }

/* PRO fiyatlandırma kartları */
.hx-plan-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:1.75rem 1.25rem;
  text-align:center;
  height:100%;
  position:relative;
}
.hx-plan-card h4{ margin:.5rem 0 .25rem; }
.hx-plan-highlight{ border-color:var(--hx-gold); box-shadow:0 15px 35px -12px rgba(255,215,0,.35); }
.hx-plan-badge{
  display:inline-block;
  background:var(--hx-gradient-gold);
  color:#1b1400;
  font-size:.72rem; font-weight:800;
  padding:.25rem .75rem;
  border-radius:20px;
  margin-bottom:.5rem;
}

.hx-check-list-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 2rem;
}
@media (max-width:767.98px){ .hx-check-list-grid{ grid-template-columns:1fr; } }

/* ---------------- İstatistikler ---------------- */
.hx-stat{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.hx-stat-num{
  font-family:var(--hx-font); font-weight:800; line-height:1;
  font-size:clamp(2rem, 4vw, 2.7rem);
  background:var(--hx-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hx-stat-label{ font-size:.88rem; font-weight:600; color:var(--hx-text-muted); }

/* ---------------- Müşteri yorumu ---------------- */
.hx-testimonial{ padding:2.5rem clamp(1.25rem,5vw,3rem) 2rem; text-align:center; }
.hx-testimonial-quote{ font-size:2.4rem; color:var(--hx-cyan); opacity:.5; }
.hx-testimonial-text{
  font-size:1.15rem; font-style:italic; color:#dfe3ee; line-height:1.7;
  margin:1rem 0 1.5rem;
}
.hx-testimonial-divider{ border:0; border-top:1px solid var(--hx-border); width:60px; margin:0 auto 1.5rem; opacity:1; }
.hx-testimonial-author{ display:flex; align-items:center; justify-content:center; gap:.85rem; }
.hx-testimonial-avatar{
  width:48px; height:48px; border-radius:50%; flex:none;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff;
}
.hx-testimonial-author > div{ text-align:left; display:flex; flex-direction:column; }
.hx-testimonial-author strong{ color:#fff; font-size:.98rem; }
.hx-testimonial-author span{ font-size:.82rem; color:var(--hx-text-muted); }

/* ---------------- Son CTA ---------------- */
.hx-btn-lg{ padding:1.1rem 2.6rem; font-size:1.05rem; }
.hx-final-cta{
  background:
    radial-gradient(120% 180% at 50% -20%, rgba(20,184,166,.22), transparent 60%),
    var(--hx-bg-alt);
  border-top:1px solid var(--hx-border);
  border-bottom:1px solid var(--hx-border);
}
.hx-final-cta h2{ margin-bottom:.5rem; }

/* ---------------- Bülten ---------------- */
.hx-newsletter-box{ max-width:560px; }
.hx-newsletter-box h2{ margin-bottom:.5rem; }
.hx-newsletter-box .hx-subscribe{ margin-top:1.5rem; }

/* ---------------- İş Ortakları ---------------- */
.hx-partners-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.25rem;
}
.hx-partner-logo{
  flex:0 0 calc(50% - 1.25rem);
  display:flex; align-items:center; justify-content:center;
  height:76px;
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:12px;
  color:var(--hx-text-muted);
  font-weight:700; font-size:.85rem; letter-spacing:.3px;
  text-align:center; padding:.5rem 1rem;
  filter:grayscale(1); opacity:.75;
  transition:filter .25s ease, opacity .25s ease;
}
.hx-partner-logo:hover{ filter:grayscale(0); opacity:1; }
@media (min-width:576px){ .hx-partner-logo{ flex:0 0 calc(33.333% - 1.25rem); } }
@media (min-width:992px){ .hx-partner-logo{ flex:1 1 0; } }

/* Kayan (marquee) iş ortakları bandı — .hx-partners-strip yerine kullanılıyor */
.hx-partners-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:.5rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hx-partners-track{
  display:flex;
  align-items:center;
  gap:1.25rem;
  width:max-content;
  animation:hx-partners-scroll 25s linear infinite;
}
.hx-partners-marquee:hover .hx-partners-track{ animation-play-state:paused; }
@keyframes hx-partners-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.hx-partner-logo-m{
  flex:0 0 auto;
  width:190px;
  height:76px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:12px;
  color:var(--hx-text-muted);
  font-weight:700; font-size:.85rem; letter-spacing:.3px;
  text-align:center; padding:.5rem 1rem;
  filter:grayscale(1); opacity:.75;
  transition:filter .25s ease, opacity .25s ease;
}
.hx-partner-logo-m:hover{ filter:grayscale(0); opacity:1; }
@media (max-width:575.98px){ .hx-partner-logo-m{ width:150px; height:64px; font-size:.78rem; } }
@media (prefers-reduced-motion: reduce){
  .hx-partners-track{ animation:none; }
}

/* ---------------- Referans Projeler (case studies) ---------------- */
.hx-case-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
}
.hx-case-thumb{
  height:160px;
  background:linear-gradient(135deg, rgba(15,118,110,.35), rgba(56,189,248,.28));
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff;
}
.hx-case-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.hx-case-body h4{ font-size:1.05rem; margin-bottom:.6rem; }
.hx-case-body p{ flex:1; }
.hx-case-body .hx-btn{ align-self:flex-start; margin-top:1.25rem; }

/* ---------------- Neden JeoValid slider ---------------- */
.hx-reason-carousel{ position:relative; padding:0 3rem; }
.hx-reason-carousel .carousel-item{ padding:.5rem 0 2.5rem; }
.hx-reason-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:130px; height:130px; border-radius:50%;
  background:var(--hx-gradient);
  font-size:3rem; color:#fff;
  box-shadow:0 25px 45px -15px rgba(20,184,166,.45);
}
.hx-reason-carousel h2{ margin-bottom:.85rem; }

.hx-reason-arrow{
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--hx-bg-card); border:1px solid var(--hx-border);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; z-index:5; opacity:.85; padding:0;
  transition:opacity .2s ease, border-color .2s ease, color .2s ease;
}
.hx-reason-arrow:hover{ opacity:1; border-color:var(--hx-cyan); color:var(--hx-cyan); }
.hx-reason-arrow.prev{ left:0; }
.hx-reason-arrow.next{ right:0; }
@media (max-width:767.98px){
  .hx-reason-carousel{ padding:0 .25rem; }
  .hx-reason-arrow{ display:none; }
}

.hx-reason-dots{ position:static; margin:1.5rem 0 0; gap:.5rem; }
.hx-reason-dots [data-bs-target]{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.2); border:0; opacity:1;
  text-indent:0; margin:0;
}
.hx-reason-dots [data-bs-target].active{ background:var(--hx-gradient); width:26px; border-radius:20px; transition:width .3s ease; }

/* ---------------- Hero: yazı daktilo efekti + giriş animasyonu ---------------- */
.hx-typewriter{
  display:inline-flex; align-items:baseline;
  white-space:nowrap; max-width:100%;
  font-size:clamp(.62rem, 2.6vw, .8rem);
  letter-spacing:1.2px;
}
.hx-tw-word{ color:var(--hx-pink); white-space:nowrap; }
.hx-typewriter::after{
  content:'';
  display:inline-block;
  width:2px; height:.9em;
  margin-left:.2rem;
  background:var(--hx-cyan);
  animation:hx-tw-blink 1s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes hx-tw-blink{ 50%{ opacity:0; } }

@keyframes hx-fade-up{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.hx-hero-anim{ opacity:0; animation:hx-fade-up .7s ease forwards; }
.hx-hero-anim.d1{ animation-delay:0ms; }
.hx-hero-anim.d2{ animation-delay:500ms; }
.hx-hero-anim.d3{ animation-delay:1000ms; }
.hx-hero-anim.d4{ animation-delay:1500ms; }
.hx-hero-anim.d5{ animation-delay:2000ms; }
.hx-hero-anim.d6{ animation-delay:2400ms; }

@media (prefers-reduced-motion: reduce){
  .hx-hero-anim{ animation:none; opacity:1; }
  .hx-typewriter::after{ animation:none; }
}

/* ---------------- Müşteri Yorumu kart slider (yandaki kartlar yarım/çeyrek görünür) ---------------- */
.hx-testi-slider{
  display:flex; align-items:center; gap:.75rem;
  max-width:1100px; margin:0 auto; padding:0 1rem;
}
.hx-testi-viewport{ overflow:hidden; flex:1; min-width:0; }
.hx-testi-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  cursor:grab;
}
.hx-testi-track.is-dragging{ transition:none; cursor:grabbing; }
.hx-testi-slide{
  flex:0 0 74%;
  max-width:74%;
  box-sizing:border-box;
  padding:0 .75rem;
  opacity:.3;
  transform:scale(.86);
  transition:opacity .5s ease, transform .5s ease;
  cursor:pointer;
  user-select:none;
}
.hx-testi-slide.is-active{ opacity:1; transform:scale(1); cursor:default; }
@media (max-width:767.98px){
  .hx-testi-slide{ flex:0 0 88%; max-width:88%; }
}

.hx-testi-arrow{
  flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--hx-bg-card); border:1px solid var(--hx-border);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; opacity:.85; padding:0;
  transition:opacity .2s ease, border-color .2s ease, color .2s ease;
}
.hx-testi-arrow:hover{ opacity:1; border-color:var(--hx-cyan); color:var(--hx-cyan); }
@media (max-width:767.98px){ .hx-testi-arrow{ display:none; } }

.hx-testi-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.75rem; }
.hx-testi-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; margin:0;
  background:rgba(255,255,255,.2); border:0;
}
.hx-testi-dots button.active{ background:var(--hx-gradient); width:26px; border-radius:20px; transition:width .3s ease; }

/* ---------------- Ana Banner Slider (arka plan görselli, başlıklı) ---------------- */
.hx-banner-slider{ position:relative; }
.hx-banner-slide{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
}
.hx-banner-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,9,20,.93) 0%, rgba(5,9,20,.8) 45%, rgba(5,9,20,.4) 100%);
}
.hx-banner-content{ position:relative; z-index:1; max-width:620px; }
.hx-banner-content .hx-eyebrow{ margin-bottom:.75rem; }
.hx-banner-content h2{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.2; margin-bottom:1rem; }
.hx-banner-content p{ margin-bottom:1.75rem; }

.hx-banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; z-index:2; opacity:.85;
  transition:opacity .2s ease, border-color .2s ease, background .2s ease;
}
.hx-banner-arrow.prev{ left:1.5rem; }
.hx-banner-arrow.next{ right:1.5rem; }
.hx-banner-arrow:hover{ opacity:1; border-color:var(--hx-cyan); background:rgba(255,255,255,.15); }

.hx-banner-dots{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); margin:0; gap:.5rem; z-index:2; }
.hx-banner-dots [data-bs-target]{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.35); opacity:1; border:0; text-indent:-9999px;
}
.hx-banner-dots [data-bs-target].active{ background:var(--hx-gradient); width:26px; border-radius:20px; transition:width .3s ease; }

@media (max-width:767.98px){
  .hx-banner-slide{ min-height:560px; text-align:center; }
  .hx-banner-content{ max-width:100%; margin:0 auto; }
  .hx-banner-arrow{ display:none; }
}

/* ---------------- Karşılama modalı (yenilikler + hızlı gezinme) ---------------- */
.hx-modal .modal-content{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:20px;
  color:#fff;
}
.hx-modal .modal-header{ border-bottom:1px solid var(--hx-border); padding:1.5rem 1.75rem 1rem; }
.hx-modal .modal-header .btn-close{ filter:invert(1) grayscale(100%) brightness(200%); opacity:.7; }
.hx-modal .modal-header .btn-close:hover{ opacity:1; }
.hx-modal .modal-title{ font-weight:800; font-size:1.3rem; }
.hx-modal .modal-body{ padding:1.5rem 1.75rem; }
.hx-modal .modal-footer{ border-top:1px solid var(--hx-border); padding:1rem 1.75rem 1.5rem; }

.hx-modal-section-title{
  font-size:.76rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--hx-cyan); margin-bottom:.9rem;
}

.hx-modal-news-list{ list-style:none; padding:0; margin:0 0 2rem; }
.hx-modal-news-list li{ display:flex; gap:.85rem; align-items:flex-start; padding:.55rem 0; }
.hx-modal-news-list .ico{
  width:36px; height:36px; border-radius:10px; flex:none;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
}
.hx-modal-news-list strong{ display:block; color:#fff; font-size:.92rem; }
.hx-modal-news-list span{ color:var(--hx-text-muted); font-size:.83rem; }

.hx-modal-nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; }
.hx-modal-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:var(--hx-bg); border:1px solid var(--hx-border); border-radius:14px;
  padding:1.1rem .5rem; text-align:center; color:#fff; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, color .2s ease;
}
.hx-modal-nav-item:hover{ border-color:var(--hx-cyan); color:#fff; transform:translateY(-3px); }
.hx-modal-nav-item i{ font-size:1.3rem; color:var(--hx-cyan); }
.hx-modal-nav-item span{ font-size:.8rem; font-weight:700; }
@media (max-width:575.98px){ .hx-modal-nav-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ==========================================================================
   İç sayfalar (Hakkımızda, İletişim, Gizlilik, Bilgi Bankası, Topluluk)
   ========================================================================== */

/* ---------------- Sayfa içi hero ---------------- */
.hx-page-hero{
  position:relative;
  padding:9.5rem 0 4.5rem;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(5,5,15,.6) 0%, rgba(5,5,15,.88) 75%, var(--hx-bg) 100%),
    url('../images/header_bg.jpg') center / cover no-repeat;
}
.hx-page-hero h1{ margin-bottom:1rem; }
.hx-page-hero p{ max-width:640px; margin-left:auto; margin-right:auto; font-size:1.05rem; }
@media (max-width:767.98px){ .hx-page-hero{ padding:8rem 0 3.5rem; } }

/* ---------------- Hakkımızda: hikaye / vizyon ---------------- */
.hx-about-img{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--hx-border);
}
.hx-about-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Ekip kartları */
.hx-team-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:2rem 1.5rem;
  text-align:center;
  height:100%;
}
.hx-team-avatar{
  width:110px; height:110px;
  border-radius:50%;
  margin:0 auto 1.25rem;
  overflow:hidden;
  border:3px solid var(--hx-border);
}
.hx-team-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-team-card h5{ margin-bottom:.2rem; font-size:1.05rem; }
.hx-team-role{ display:block; color:var(--hx-cyan); font-size:.85rem; font-weight:700; margin-bottom:.75rem; }
.hx-team-socials{ display:flex; justify-content:center; gap:.5rem; margin-top:.9rem; }
.hx-team-socials a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hx-border);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem;
}
.hx-team-socials a:hover{ background:var(--hx-gradient); border-color:transparent; }

/* ---------------- İletişim ---------------- */
.hx-form-label{ font-size:.85rem; font-weight:700; color:#dfe3ee; margin-bottom:.45rem; display:block; }
.hx-form-control{
  width:100%;
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  color:#fff;
  border-radius:12px;
  padding:.8rem 1.1rem;
  font-family:var(--hx-font);
  font-size:.95rem;
}
.hx-form-control::placeholder{ color:var(--hx-text-muted); }
.hx-form-control:focus{ outline:none; border-color:var(--hx-pink); box-shadow:none; background:var(--hx-bg-card); color:#fff; }
textarea.hx-form-control{ resize:vertical; min-height:140px; }

.hx-contact-info-item{ display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.75rem; }
.hx-contact-info-item .ico{
  flex:none; width:48px; height:48px; border-radius:50%;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
}
.hx-contact-info-item h6{ margin-bottom:.25rem; color:#fff; font-size:.95rem; }
.hx-contact-info-item p, .hx-contact-info-item a{ margin:0; color:var(--hx-text-muted); font-size:.92rem; }
.hx-contact-info-item a:hover{ color:var(--hx-pink); }

.hx-map-placeholder{
  height:320px;
  border-radius:16px;
  border:1px solid var(--hx-border);
  background:var(--hx-bg-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  color:var(--hx-text-muted);
  text-align:center;
}
.hx-map-placeholder i{ font-size:2.5rem; color:var(--hx-cyan); }

/* ---------------- Gizlilik Politikası ---------------- */
.hx-legal-toc{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:1.5rem 1.75rem;
  position:sticky;
  top:110px;
}
.hx-legal-toc h6{ color:#fff; font-size:.85rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem; }
.hx-legal-toc a{ display:block; padding:.5rem 0; color:var(--hx-text-muted); font-size:.9rem; border-bottom:1px solid var(--hx-border); }
.hx-legal-toc a:last-child{ border-bottom:0; }
.hx-legal-toc a:hover{ color:var(--hx-pink); }

.hx-legal-section{ margin-bottom:2.75rem; scroll-margin-top:110px; }
.hx-legal-section:last-child{ margin-bottom:0; }
.hx-legal-section h3{ font-size:1.3rem; margin-bottom:1rem; color:var(--hx-cyan); }
.hx-legal-section p{ color:var(--hx-text-muted); margin-bottom:1rem; }
.hx-legal-section ul{ color:var(--hx-text-muted); padding-left:1.2rem; margin-bottom:1rem; }
.hx-legal-section li{ margin-bottom:.5rem; }
.hx-legal-updated{ color:var(--hx-text-muted); font-size:.88rem; }

/* ---------------- Bilgi Bankası (Wiki) ---------------- */
.hx-search-box{ max-width:640px; margin:0 auto; position:relative; }
.hx-search-box input{
  width:100%;
  padding:1rem 1.5rem 1rem 3.3rem;
  border-radius:50px;
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  color:#fff;
  font-family:var(--hx-font);
  font-size:1rem;
}
.hx-search-box input::placeholder{ color:var(--hx-text-muted); }
.hx-search-box input:focus{ outline:none; border-color:var(--hx-pink); }
.hx-search-box i{
  position:absolute; left:1.35rem; top:50%; transform:translateY(-50%);
  color:var(--hx-text-muted); font-size:1.1rem;
}

.hx-wiki-cat{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:2.25rem 1.25rem;
  text-align:center;
  height:100%;
  display:block;
  transition:transform .25s ease, border-color .25s ease;
}
.hx-wiki-cat:hover{ transform:translateY(-4px); border-color:var(--hx-cyan); }
.hx-wiki-cat .ico{
  width:60px; height:60px; margin:0 auto 1.1rem;
  border-radius:50%;
  background:var(--hx-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff;
}
.hx-wiki-cat h5{ font-size:1rem; margin-bottom:.4rem; color:#fff; }
.hx-wiki-cat p{ font-size:.85rem; margin:0; }

.hx-article-list{ list-style:none; padding:0; margin:0; }
.hx-article-list li{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--hx-border);
}
.hx-article-list li:last-child{ border-bottom:0; }
.hx-article-list a.hx-article-title{ color:#fff; font-weight:700; font-size:.95rem; }
.hx-article-list a.hx-article-title:hover{ color:var(--hx-pink); }
.hx-article-meta{ font-size:.8rem; color:var(--hx-text-muted); white-space:nowrap; }

/* ---------------- Topluluk / Forum ---------------- */
.hx-forum-cat{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:1.5rem 1.75rem;
  margin-bottom:1rem;
}
.hx-forum-cat-left{ display:flex; align-items:center; gap:1.1rem; }
.hx-forum-cat .ico{
  flex:none; width:48px; height:48px; border-radius:50%;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
}
.hx-forum-cat h5{ margin:0 0 .2rem; font-size:1rem; color:#fff; }
.hx-forum-cat p{ margin:0; font-size:.85rem; }
.hx-forum-cat-count{ font-size:.85rem; color:var(--hx-cyan); font-weight:700; white-space:nowrap; }

.hx-forum-table{ width:100%; border-collapse:separate; border-spacing:0 .6rem; }
.hx-forum-table th{
  text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--hx-text-muted); padding:0 1.1rem .75rem; font-weight:700;
}
.hx-forum-table td{
  padding:1.1rem; background:var(--hx-bg-card); border-top:1px solid var(--hx-border); border-bottom:1px solid var(--hx-border);
  font-size:.9rem; vertical-align:middle;
}
.hx-forum-table tr td:first-child{ border-left:1px solid var(--hx-border); border-radius:12px 0 0 12px; }
.hx-forum-table tr td:last-child{ border-right:1px solid var(--hx-border); border-radius:0 12px 12px 0; }
.hx-forum-table a{ color:#fff; font-weight:700; }
.hx-forum-table a:hover{ color:var(--hx-pink); }
.hx-forum-table .muted{ color:var(--hx-text-muted); }

/* Konu detay sayfası */
.hx-topic-post{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:1.85rem;
  margin-bottom:1.25rem;
}
.hx-topic-post-header{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.hx-topic-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1rem;
}
.hx-topic-post-meta strong{ display:block; color:#fff; font-size:.94rem; }
.hx-topic-post-meta span{ font-size:.78rem; color:var(--hx-text-muted); }
.hx-topic-post-body p{ color:#dfe3ee; margin-bottom:1rem; }
.hx-topic-post-body p:last-child{ margin-bottom:0; }
.hx-like-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:1px solid var(--hx-border); color:var(--hx-text-muted);
  border-radius:50px; padding:.45rem 1.1rem; font-size:.85rem; font-weight:700;
  transition:border-color .2s ease, color .2s ease;
}
.hx-like-btn:hover{ border-color:var(--hx-pink); color:var(--hx-pink); }

/* ---------------- Özellikler (detay sayfası) ---------------- */
.hx-feature-panel{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:20px;
  min-height:260px;
  display:flex; align-items:center; justify-content:center;
}
.hx-feature-panel .ico{
  width:120px; height:120px;
  border-radius:50%;
  background:var(--hx-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:#fff;
  box-shadow:0 25px 45px -15px rgba(20,184,166,.45);
}
.hx-feature-num{
  display:inline-block;
  font-size:.8rem; font-weight:800; letter-spacing:2px;
  color:var(--hx-text-muted);
  margin-bottom:.5rem;
}
.hx-feature-row{ margin-bottom:5rem; }
.hx-feature-row:last-child{ margin-bottom:0; }
@media (max-width:991.98px){ .hx-feature-row{ margin-bottom:3.5rem; } }
.hx-feature-panel{ overflow:visible; position:relative; }
.hx-feature-panel img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:20px; }
.hx-feature-panel .hx-store-btn{ margin:0; }

/* ---------------- Video / görsel anlatım (learning tarzı) ---------------- */

/* Büyük tanıtım videosu bloğu (sayfa üstü) */
.hx-video-hero{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(155deg,#1c2942,#0a1220);
  border:1px solid var(--hx-border);
  display:flex; align-items:center; justify-content:center;
}
.hx-video-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.hx-video-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(5,9,20,.9) 100%);
}
.hx-video-play{
  position:relative; z-index:2;
  width:88px; height:88px; border-radius:50%;
  background:var(--hx-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; padding-left:6px;
  box-shadow:0 25px 45px -15px rgba(20,184,166,.55);
}
.hx-video-caption{
  position:absolute; left:1.5rem; bottom:1.25rem; right:1.5rem; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.hx-video-caption strong{ color:#fff; font-size:1.05rem; display:block; }
.hx-video-caption span{ color:var(--hx-text-muted); font-size:.85rem; }
.hx-video-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:.35rem .75rem; border-radius:20px; white-space:nowrap;
}

/* Küçük görsel/video önizleme (özellik ve adım panellerinde) */
.hx-media-thumb{ position:relative; width:100%; height:100%; }
.hx-media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-media-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background:rgba(10,15,30,.55); backdrop-filter:blur(3px);
  border:2px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; padding-left:4px;
}
.hx-media-duration{
  position:absolute; right:.75rem; bottom:.75rem; z-index:2;
  background:rgba(5,9,20,.75); color:#fff; font-size:.72rem; font-weight:700;
  padding:.25rem .6rem; border-radius:6px; letter-spacing:.5px;
}

/* Büyük, öne çıkan adım / özellik numarası rozeti */
.hx-step-badge{
  position:absolute; top:-16px; left:-16px; z-index:3;
  width:52px; height:52px; border-radius:50%;
  background:var(--hx-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:800; color:#fff;
  box-shadow:0 12px 25px -8px rgba(20,184,166,.6);
  border:4px solid var(--hx-bg);
}
@media (max-width:575.98px){
  .hx-video-play{ width:64px; height:64px; font-size:1.5rem; }
  .hx-step-badge{ width:42px; height:42px; font-size:1rem; top:-12px; left:-12px; }
}

/* ---------------- Başlangıç Merkezi ---------------- */
.hx-start-card{
  background:var(--hx-bg-card);
  border:1px solid var(--hx-border);
  border-radius:16px;
  padding:2.5rem 1.75rem;
  text-align:center;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hx-start-card .ico{
  width:70px; height:70px;
  border-radius:50%;
  background:var(--hx-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; color:#fff;
  margin-bottom:1.25rem;
  flex:none;
}
.hx-start-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.hx-start-card p{ flex:1; margin-bottom:1.5rem; }

/* ==========================================================================
   Wiki / Bilgi Bankası — dokümantasyon arayüzü
   ========================================================================== */

/* Üst araç çubuğu (arama + giriş) */
.hx-wiki-toolbar{
  padding:7.5rem 0 1.5rem;
  border-bottom:1px solid var(--hx-border);
  background:var(--hx-bg-alt);
}
.hx-wiki-toolbar h4{ margin:0; font-size:1.2rem; }
@media (max-width:767.98px){ .hx-wiki-toolbar{ padding-top:6.5rem; } }

.hx-search-box.hx-search-box-inline{ max-width:260px; margin:0; }
.hx-search-box.hx-search-box-inline input{ padding:.55rem 1rem .55rem 2.6rem; font-size:.85rem; border-radius:50px; }
.hx-search-box.hx-search-box-inline i{ left:1rem; font-size:.95rem; }

/* Üç sütunlu doküman düzeni: ağaç menü | makale | içindekiler */
/* Tam genişlikte (edge-to-edge) 3 sütun: sol menü ve sağ İçindekiler tarayıcı
   kenarına bitişik durur, ortadaki makale sütunu kalan tüm genişliği kullanır.
   Bootstrap .container kasıtlı olarak kaldırıldı (bkz. wiki.html). position:sticky
   kullanılır — bu sayede kaydırırken footer'ın üzerine binmeden, kendi üst
   sınırının bittiği yerde akışa geri döner; ayrıca içerik taştığında sayfanın
   kendisiyle birlikte kayar, ayrı bir iç kaydırma çubuğu oluşmaz. */
.hx-docs-layout{ display:flex; align-items:flex-start; padding:3rem 0 5rem; width:100%; }
.hx-docs-sidebar{
  flex:0 0 230px; width:230px;
  position:sticky; top:110px;
  padding:0 1rem 2rem 1.75rem;
}
.hx-docs-content{ flex:1; min-width:0; display:flex; align-items:flex-start; padding:0 1.75rem; }
.hx-docs-article-col{ flex:1; min-width:0; max-width:900px; margin:0 auto; }

/* İçindekiler — ince, kutusuz "bu sayfada" listesi */
.hx-docs-toc{
  flex:0 0 200px; width:200px;
  position:sticky; top:110px;
  border-left:2px solid var(--hx-border);
  padding:0 1.75rem 2rem 1.1rem;
}
.hx-docs-toc h6{ font-size:.7rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--hx-text-muted); margin-bottom:.9rem; }
.hx-docs-toc a{ display:block; font-size:.83rem; line-height:1.35; color:var(--hx-text-muted); padding:.32rem 0; }
.hx-docs-toc a:hover{ color:var(--hx-pink); }

/* Ağaç menü (kategori / makale) */
.hx-docs-nav{ list-style:none; padding:0; margin:0; }
.hx-docs-cat{ margin-bottom:.35rem; }
.hx-docs-cat-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:transparent; border:0; text-align:left;
  padding:.65rem .75rem; border-radius:10px;
  color:#fff; font-weight:700; font-size:.88rem;
}
.hx-docs-cat-toggle:hover{ background:rgba(255,255,255,.05); }
.hx-docs-cat-toggle .chev{ transition:transform .2s ease; font-size:.72rem; color:var(--hx-text-muted); flex:none; }
.hx-docs-cat-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.hx-docs-sublist{
  list-style:none; margin:.15rem 0 .6rem 1.05rem; padding:.1rem 0 .1rem .85rem;
  border-left:1px solid var(--hx-border);
}
.hx-docs-sublist a{ display:block; padding:.45rem .7rem; border-radius:8px; color:var(--hx-text-muted); font-size:.85rem; }
.hx-docs-sublist a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.hx-docs-sublist a.active{ color:var(--hx-cyan); background:rgba(20,184,166,.1); font-weight:700; }

.hx-docs-offcanvas{ background:var(--hx-bg-alt); color:#fff; max-height:88vh; }
.hx-docs-offcanvas .offcanvas-header{ border-bottom:1px solid var(--hx-border); }
.hx-docs-offcanvas .offcanvas-title{ color:#fff; font-weight:800; }

/* Makale başlığı / meta */
.hx-docs-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem;
  color:var(--hx-text-muted); font-size:.85rem;
  margin-bottom:2rem; padding-bottom:1.5rem;
  border-bottom:1px solid var(--hx-border);
}
.hx-docs-meta .author{ display:flex; align-items:center; gap:.6rem; }
.hx-docs-author-avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--hx-gradient); color:#fff; font-weight:800; font-size:.75rem;
  display:flex; align-items:center; justify-content:center;
}

.hx-docs-content article h2{ font-size:1.4rem; margin:2.5rem 0 1rem; scroll-margin-top:110px; }
.hx-docs-content article h3{ font-size:1.1rem; margin:1.75rem 0 .85rem; scroll-margin-top:110px; }
.hx-docs-content article p{ color:var(--hx-text-muted); margin-bottom:1.1rem; }
.hx-docs-content article ul,
.hx-docs-content article ol{ color:var(--hx-text-muted); padding-left:1.2rem; margin-bottom:1.25rem; }
.hx-docs-content article li{ margin-bottom:.5rem; }
.hx-docs-content article > *:first-child{ margin-top:0; }

.hx-code-block{
  background:#0a1220;
  border:1px solid var(--hx-border);
  border-radius:12px;
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  margin:0 0 1.5rem;
}
.hx-code-block .lang{ display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--hx-text-muted); margin-bottom:.75rem; }
.hx-code-block pre{ margin:0; }
.hx-code-block code{ font-family:'Courier New', monospace; font-size:.85rem; color:#dfe3ee; white-space:pre-wrap; word-break:break-word; }

/* "Yardımcı oldu mu" kutusu */
.hx-helpful{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  background:var(--hx-bg-card); border:1px solid var(--hx-border); border-radius:16px;
  padding:1.5rem; margin:2.5rem 0;
}
.hx-helpful strong{ color:#fff; font-size:.92rem; }
.hx-helpful-actions{ display:flex; gap:.75rem; margin-left:auto; }
.hx-helpful-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; border:1px solid var(--hx-border); color:#fff;
  border-radius:50px; padding:.5rem 1.25rem; font-weight:700; font-size:.85rem;
}
.hx-helpful-btn:hover{ border-color:var(--hx-cyan); color:var(--hx-cyan); }

/* İlgili makale kartları */
.hx-related-card{
  display:block; height:100%;
  background:var(--hx-bg-card); border:1px solid var(--hx-border); border-radius:16px;
  padding:1.5rem;
  transition:border-color .2s ease, transform .2s ease;
}
.hx-related-card:hover{ border-color:var(--hx-cyan); transform:translateY(-3px); }
.hx-related-card h6{ color:#fff; font-size:.95rem; margin-bottom:.5rem; }
.hx-related-card p{ color:var(--hx-text-muted); font-size:.85rem; margin-bottom:0; }

/* ==========================================================================
   JeoValid PRO — Fiyatlandırma sayfası
   ========================================================================== */

/* Plan kartları: fiyat bloğu ve dahil özellik listesi */
.hx-plan-card{ display:flex; flex-direction:column; }
.hx-plan-price{ font-size:2.5rem; font-weight:800; line-height:1; margin:.75rem 0 .15rem; }
.hx-plan-price .cur{ font-size:1.25rem; font-weight:700; vertical-align:top; margin-right:.15rem; }
.hx-plan-highlight .hx-plan-price{
  background:var(--hx-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hx-plan-period{ display:block; font-size:.82rem; color:var(--hx-text-muted); font-weight:600; margin-bottom:1rem; }
.hx-plan-note{ font-size:.78rem; color:var(--hx-text-muted); min-height:2.4em; margin-bottom:1rem; }
.hx-plan-features{ list-style:none; padding:0; margin:0 0 1.5rem; text-align:left; flex:1; }
.hx-plan-features li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.85rem; color:#dfe3ee; margin-bottom:.65rem; }
.hx-plan-features li i{ color:var(--hx-cyan); margin-top:.2rem; flex:none; }
.hx-plan-card .hx-btn{ width:100%; justify-content:center; margin-top:auto; }

.hx-plan-disclaimer{
  display:flex; align-items:flex-start; gap:.85rem;
  background:var(--hx-bg-card); border:1px solid var(--hx-border); border-radius:14px;
  padding:1.1rem 1.4rem; font-size:.85rem; color:var(--hx-text-muted);
  max-width:760px; margin:2.75rem auto 0;
}
.hx-plan-disclaimer i{ color:var(--hx-gold); font-size:1.2rem; flex:none; margin-top:.1rem; }

/* Güven rozetleri */
.hx-trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2.75rem; margin-top:3rem; }
.hx-trust-item{ display:flex; align-items:center; gap:.65rem; font-size:.85rem; font-weight:600; color:#dfe3ee; }
.hx-trust-item i{ font-size:1.35rem; color:var(--hx-cyan); }

/* Fiyata dahil olan özellik kartları */
.hx-pro-feature-card{
  background:var(--hx-bg-card); border:1px solid var(--hx-border); border-radius:16px;
  padding:2rem 1.5rem; height:100%;
  transition:transform .25s ease, border-color .25s ease;
}
.hx-pro-feature-card:hover{ transform:translateY(-4px); border-color:var(--hx-cyan); }
.hx-pro-feature-card .ico{
  width:56px; height:56px; border-radius:14px; margin-bottom:1.15rem;
  background:var(--hx-gradient); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff;
}
.hx-pro-feature-card h4{ font-size:1.05rem; margin-bottom:.5rem; }
.hx-pro-feature-card p{ margin:0; }

/* Ücretsiz / PRO karşılaştırma tablosu */
.hx-compare-wrap{ overflow-x:auto; }
.hx-compare-table{ width:100%; min-width:600px; border-collapse:separate; border-spacing:0 .5rem; }
.hx-compare-table th{
  text-align:center; font-size:.78rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--hx-text-muted); padding:0 1.25rem .75rem; font-weight:700;
}
.hx-compare-table th:first-child{ text-align:left; }
.hx-compare-table td{
  padding:1rem 1.25rem; background:var(--hx-bg-card);
  border-top:1px solid var(--hx-border); border-bottom:1px solid var(--hx-border);
  font-size:.9rem; text-align:center; vertical-align:middle; color:#dfe3ee;
}
.hx-compare-table td:first-child{
  border-left:1px solid var(--hx-border); border-radius:12px 0 0 12px;
  text-align:left; font-weight:700; color:#fff;
}
.hx-compare-table td:last-child{ border-right:1px solid var(--hx-border); border-radius:0 12px 12px 0; }
.hx-compare-table td.pro-col{ background:rgba(56,189,248,.07); }
.hx-compare-table .yes{ color:var(--hx-cyan); font-size:1.2rem; }
.hx-compare-table .no{ color:var(--hx-text-muted); font-size:1.2rem; opacity:.45; }
@media (max-width:767.98px){ .hx-compare-table{ min-width:520px; } }