/* ════════════════════════════════════════════════════════════
   zoho.css — /zoho/ premium landing
   Tüm kurallar .landing-zoho-hub altında scope'lu (izole)
   Brand navy + aurora + orbit + marquee + scroll reveal
   ════════════════════════════════════════════════════════════ */

.landing-zoho-hub{
  --z-navy:#001a33;
  --z-navy2:#002441;
  --z-blue:#5E94EB;
  --z-blue-lt:#7DB0FF;
  --z-ink:#0B1B2C;
}

/* ─── Scroll reveal (JS .is-in ekler) ─── */
.landing-zoho-hub [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.landing-zoho-hub [data-reveal].is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .landing-zoho-hub [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ═══════════════ HERO ═══════════════ */
.zh-hero{
  position:relative;
  overflow:hidden;
  padding:170px 0 110px;
  /* style.css'teki section{background:transparent!important} kuralını yen */
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, #00284a 0%, transparent 60%),
    linear-gradient(180deg, #001426 0%, #00203c 55%, #001a33 100%) !important;
  isolation:isolate;
}
/* Aurora hareketli ışık katmanları */
.zh-hero::before,
.zh-hero::after{
  content:""; position:absolute; inset:-20% -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 38% 50% at 22% 30%, rgba(94,148,235,.28), transparent 60%),
    radial-gradient(ellipse 42% 55% at 80% 60%, rgba(125,176,255,.20), transparent 62%);
  animation:zhAurora 16s ease-in-out infinite alternate;
  filter:blur(8px);
}
.zh-hero::after{
  background:
    radial-gradient(ellipse 36% 48% at 70% 25%, rgba(78,205,196,.14), transparent 60%),
    radial-gradient(ellipse 40% 52% at 25% 75%, rgba(94,148,235,.16), transparent 62%);
  animation-duration:22s; animation-direction:alternate-reverse;
}
@keyframes zhAurora{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(3%,2%,0) scale(1.08); }
}
/* İnce grid overlay */
.zh-hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(125,176,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,176,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 80%);
}
/* Arka planda süzülen 46 logo · merkez maske ile soluk (metin okunur) */
.zh-hero__floaters{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  /* Ortayı (başlık bölgesi) soluklaştır, kenarlarda logolar belirgin */
  -webkit-mask:radial-gradient(ellipse 46% 52% at 50% 48%, transparent 0%, rgba(0,0,0,.35) 45%, #000 75%);
  mask:radial-gradient(ellipse 46% 52% at 50% 48%, transparent 0%, rgba(0,0,0,.35) 45%, #000 75%);
}
.zh-floater{
  position:absolute; width:var(--s,46px); height:var(--s,46px);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
  /* yıldız gibi: çok hafif süzülme + yavaş, bağımsız parlayıp sönme */
  animation:
    zhDriftA calc(var(--dur,14s) * 1.7) ease-in-out infinite alternate,
    zhTwinkle calc(var(--dur,14s) * 0.85) ease-in-out infinite;
  animation-delay:var(--delay,0s), var(--delay,0s);
  will-change:transform, opacity;
}
.zh-floater img{ width:100%; height:100%; object-fit:contain; }

/* 3 farklı yörünge — nth ile dağıt (tek tip değil) */
.zh-floater:nth-child(3n+2){ animation-name:zhDriftB, zhTwinkle; }
.zh-floater:nth-child(3n+3){ animation-name:zhDriftC, zhTwinkle; }

/* Çok hafif süzülme — yıldızlar yerinde durur, minik salınım (büyük scale/rotate yok) */
@keyframes zhDriftA{
  0%   { transform:translate(0,3px)   scale(.99); }
  100% { transform:translate(-4px,-6px) scale(1.02); }
}
@keyframes zhDriftB{
  0%   { transform:translate(0,-3px)  scale(1.01); }
  100% { transform:translate(5px,5px) scale(.99); }
}
@keyframes zhDriftC{
  0%   { transform:translate(4px,3px) scale(1); }
  100% { transform:translate(-5px,-5px) scale(1.02); }
}
/* Parlayıp sönme — simetrik: yavaş parlar, AYNI hızla yavaş söner (ani gitme yok) */
@keyframes zhTwinkle{
  0%   { opacity:.14; }
  25%  { opacity:.40; }
  50%  { opacity:.72; }
  75%  { opacity:.40; }
  100% { opacity:.14; }
}
@media(prefers-reduced-motion:reduce){ .zh-floater{ animation:none; opacity:.4; } }

.zh-hero__wrap{ position:relative; z-index:2; max-width:960px; margin:0 auto; padding:0 24px; text-align:center; }
.zh-hero__crumb{ display:flex; gap:8px; justify-content:center; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:22px; }
.zh-hero__crumb a{ color:rgba(255,255,255,.7); text-decoration:none; }
.zh-hero__crumb a:hover{ color:#fff; }

.zh-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; margin-bottom:26px;
  font-size:12.5px; font-weight:600; letter-spacing:.3px;
  color:var(--z-blue-lt);
  background:rgba(125,176,255,.10);
  border:1px solid rgba(125,176,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.zh-badge svg{ width:15px; height:15px; }
.zh-badge .dot{ width:7px; height:7px; border-radius:50%; background:#4ECDC4; box-shadow:0 0 0 0 rgba(78,205,196,.6); animation:zhPulse 2s infinite; }
@keyframes zhPulse{ 0%{box-shadow:0 0 0 0 rgba(78,205,196,.5)} 70%{box-shadow:0 0 0 8px rgba(78,205,196,0)} 100%{box-shadow:0 0 0 0 rgba(78,205,196,0)} }

.zh-hero h1{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(38px,6vw,76px); line-height:1.04; letter-spacing:-.03em;
  color:#fff; margin:0 0 22px; text-wrap:balance;
}
.zh-hero h1 .grad{
  background:linear-gradient(110deg, var(--z-blue-lt) 0%, #4ECDC4 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.zh-hero__lede{
  font-size:clamp(15px,1.7vw,19px); line-height:1.7; color:rgba(255,255,255,.72);
  max-width:680px; margin:0 auto 34px; text-wrap:pretty;
}
.zh-hero__lede strong{ color:#fff; font-weight:700; }

.zh-hero__ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:54px; }
.zh-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:54px; padding:0 28px; border-radius:14px;
  font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .2s;
}
.zh-btn--primary{
  background:linear-gradient(110deg, var(--z-blue) 0%, var(--z-blue-lt) 100%);
  color:#03182f;
  box-shadow:0 14px 40px -12px rgba(94,148,235,.7);
}
.zh-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 56px -14px rgba(94,148,235,.85); }
.zh-btn--ghost{
  background:rgba(255,255,255,.04); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.zh-btn--ghost:hover{ background:rgba(255,255,255,.10); transform:translateY(-3px); }
.zh-btn .ar{ transition:transform .25s; }
.zh-btn:hover .ar{ transform:translateX(5px); }

/* Hero istatistik şeridi */
.zh-hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:760px; margin:0 auto;
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.zh-hero__stats > div{ padding:22px 16px; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.zh-hero__stats > div:last-child{ border-right:0; }
.zh-hero__stats dd{ font-size:clamp(26px,3.4vw,38px); font-weight:800; color:#fff; line-height:1; margin:0 0 6px;
  background:linear-gradient(180deg,#fff,#9cc4ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.zh-hero__stats dt{ font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.55); }
@media(max-width:680px){ .zh-hero__stats{ grid-template-columns:repeat(2,1fr); }
  .zh-hero__stats > div:nth-child(2){border-right:0} .zh-hero__stats > div:nth-child(1),.zh-hero__stats>div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.08)} }

/* ═══════════════ LOGO MARQUEE ═══════════════ */
.zh-marquee{ padding:42px 0; border-bottom:1px solid var(--border); background:var(--bg); overflow:hidden; }
.zh-marquee__label{ text-align:center; font-size:12.5px; letter-spacing:.5px; color:var(--text-light); margin-bottom:26px; padding:0 24px; }
.zh-marquee__label strong{ color:var(--fg); }
.zh-marquee__track{ display:flex; gap:44px; width:max-content; align-items:center; animation:zhMarquee 60s linear infinite; }
.zh-marquee:hover .zh-marquee__track{ animation-play-state:paused; }
@keyframes zhMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Logolar çerçevesiz, büyük — doğrudan akar */
.zh-app{
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  white-space:nowrap; flex-shrink:0;
  transition:transform .25s;
}
.zh-app:hover{ transform:translateY(-4px); }
.zh-app img{ width:50px; height:50px; object-fit:contain; display:block; }
.zh-app span{ font-size:12px; font-weight:600; color:var(--text-light); }

/* ═══════════════ ECOSYSTEM ORBIT ═══════════════ */
.zh-orbit-sec{ position:relative; padding:110px 0; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
.zh-orbit-sec__wrap{ max-width:1100px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
@media(max-width:880px){ .zh-orbit-sec__wrap{ grid-template-columns:1fr; gap:40px; } }

.zh-orbit-copy .eyebrow{ color:var(--z-blue); }
.zh-orbit-copy h2{ font-size:clamp(28px,3.6vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--fg); margin:10px 0 18px; text-wrap:balance; }
.zh-orbit-copy p{ font-size:16px; line-height:1.7; color:var(--text); margin-bottom:14px; }
.zh-orbit-copy p strong{ color:var(--fg); }

/* Orbit görseli */
.zh-orbit{ position:relative; aspect-ratio:1; max-width:460px; margin:0 auto; width:100%; }
.zh-orbit__ring{
  position:absolute; inset:0; border:1px dashed rgba(94,148,235,.28); border-radius:50%;
}
.zh-orbit__ring--2{ inset:16%; border-color:rgba(94,148,235,.22); }
.zh-orbit__ring--3{ inset:32%; border-color:rgba(94,148,235,.16); }
/* Orbit merkezi — yumuşak ışık halesi, kutu yok */
.zh-orbit__core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1; z-index:3;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.zh-orbit__core::before{
  content:""; position:absolute; inset:-30%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(94,148,235,.32), transparent 68%);
}
.zh-orbit__core img{ width:72%; height:auto; filter:drop-shadow(0 8px 22px rgba(0,49,83,.45)); }
.zh-orbit__core span{ font-size:10px; font-weight:800; letter-spacing:1px; color:var(--z-blue-lt); }
/* Dönen logo halkası — tek katman, node'lar top/left ile yerleşir */
.zh-orbit__spin{ position:absolute; inset:0; animation:zhSpin 30s linear infinite; }
@keyframes zhSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
/* Orbit node — çerçevesiz, logo doğrudan halka üzerinde */
.zh-orbit__node{
  position:absolute; width:13%; aspect-ratio:1;
  transform:translate(-50%,-50%);  /* top/left = node merkezi */
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 16px rgba(0,49,83,.35));
}
.zh-orbit__node > span{ display:flex; width:100%; height:100%; animation:zhSpinRev 30s linear infinite; }
.zh-orbit__node img{ width:100%; height:100%; object-fit:contain; }
@keyframes zhSpinRev{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@media(prefers-reduced-motion:reduce){ .zh-orbit__spin{animation:none} .zh-orbit__node > span{animation:none} }

/* ═══════════════ COST COMPARISON ═══════════════ */
.zh-compare{ padding:100px 0; background:var(--bg); }
.zh-compare__wrap{ max-width:980px; margin:0 auto; padding:0 24px; }
.zh-compare__head{ text-align:center; margin-bottom:48px; }
.zh-compare__head .eyebrow{ color:var(--z-blue); }
.zh-compare__head h2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.025em; color:var(--fg); margin:10px 0 0; text-wrap:balance; }
.zh-compare__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:760px){ .zh-compare__grid{ grid-template-columns:1fr; } }
.zh-cc{
  position:relative; padding:32px; border-radius:22px; overflow:hidden;
  border:1px solid var(--border-2); background:var(--card);
}
.zh-cc--bad{ background:linear-gradient(180deg, rgba(255,107,107,.05), var(--card)); }
.zh-cc--good{ background:linear-gradient(180deg, rgba(78,205,196,.07), var(--card)); border-color:rgba(78,205,196,.35); box-shadow:0 24px 60px -28px rgba(0,49,83,.35); }
.zh-cc__tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:16px; }
.zh-cc--bad .zh-cc__tag{ background:rgba(255,107,107,.12); color:#e0584f; }
.zh-cc--good .zh-cc__tag{ background:rgba(78,205,196,.16); color:#1a9d92; }
.zh-cc__price{ font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--fg); margin-bottom:4px; }
.zh-cc__price small{ font-size:15px; font-weight:600; color:var(--text-light); }
.zh-cc__sub{ font-size:13.5px; color:var(--text-light); margin-bottom:22px; }
.zh-cc__bars{ display:flex; flex-direction:column; gap:10px; }
.zh-cc__bar{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text); }
.zh-cc__bar span{ flex:0 0 96px; }
.zh-cc__bar i{ height:9px; border-radius:99px; display:block; width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.zh-cc.is-in .zh-cc__bar i{ width:var(--w,50%); }
.zh-cc--bad .zh-cc__bar i{ background:linear-gradient(90deg,#ff8a80,#e0584f); }
.zh-cc--good .zh-cc__bar i{ background:linear-gradient(90deg,#4ECDC4,#2bb6ab); }
.zh-cc__save{ margin-top:18px; font-size:14px; font-weight:700; color:#1a9d92; }

/* ═══════════════ PRODUCT CARDS (logo + glow) ═══════════════ */
.landing-zoho-hub .zoho-hub-card{ position:relative; overflow:hidden; }
.landing-zoho-hub .zoho-hub-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 60% 80% at 80% 0%, rgba(94,148,235,.12), transparent 60%);
  transition:opacity .35s;
}
.landing-zoho-hub .zoho-hub-card:hover::after{ opacity:1; }
/* Kart logosu — çerçevesiz, büyük, doğrudan kartın üstünde */
.zh-card-logo{ display:block; margin-bottom:16px; }
.zh-card-logo img{ width:54px; height:54px; object-fit:contain; display:block; }

/* ═══════════════ PILLARS upgrade ═══════════════ */
.landing-zoho-hub .lp-pillar{ transition:transform .3s, box-shadow .3s, border-color .3s; }
.landing-zoho-hub .lp-pillar:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -30px rgba(0,49,83,.4); border-color:rgba(94,148,235,.35); }
.landing-zoho-hub .lp-pillar__num{ background:linear-gradient(110deg,var(--z-blue),var(--z-blue-lt)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }

/* ═══════════════ FINAL CTA glow ═══════════════ */
.landing-zoho-hub .lp-cta__box{ position:relative; overflow:hidden; }
.landing-zoho-hub .lp-cta__box::before{
  content:""; position:absolute; inset:-50%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent, rgba(94,148,235,.18), transparent 30%);
  animation:zhSpin 12s linear infinite;
}
.landing-zoho-hub .lp-cta__box > *{ position:relative; z-index:1; }

/* ═══════════════ CONSTELLATION — merkezden çiçek gibi açılır ═══════════════ */
.zh-const{ position:relative; padding:100px 0 120px; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) !important; }
/* özgüllük: section [class*="__head"] (style.css) kuralını yenmek için .zh-const ön ek */
.zh-const .zh-const__head{ max-width:680px !important; margin:0 auto 30px !important; padding:0 24px; text-align:center !important; }
.zh-const .zh-const__head .eyebrow{ color:var(--z-blue); justify-content:center; }
.zh-const .zh-const__head h2{ font-size:clamp(28px,3.8vw,46px); font-weight:800; letter-spacing:-.025em; line-height:1.08; color:var(--fg); margin:10px 0 16px; text-wrap:balance; }
.zh-const .zh-const__head h2 .grad{ background:linear-gradient(110deg,var(--z-blue),#4ECDC4 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.zh-const .zh-const__head p{ font-size:16px; line-height:1.7; color:var(--text); }
.zh-const .zh-const__head p strong{ color:var(--fg); }

.zh-const__stage{ position:relative; width:min(760px,88vw); aspect-ratio:1; margin:18px auto 0; }
.zh-const__nodes{ position:absolute; inset:0; pointer-events:none; }

/* Merkez — Zoho One, yumuşak ışık halesi */
.zh-const__center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:160px; height:160px; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  animation:zhCenterFloat 6s ease-in-out infinite;
}
.zh-const__center::before{
  content:""; position:absolute; inset:-25%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(94,148,235,.30), transparent 68%);
}
.zh-const__center img{ width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,49,83,.4)); }
.zh-const__center b{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--z-blue-lt); font-weight:800; }
@keyframes zhCenterFloat{ 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,calc(-50% - 7px))} }

/* Node — çerçevesiz logo, merkezden açılır */
.zh-node{
  position:absolute; left:50%; top:50%;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%) scale(.12);
  opacity:0; pointer-events:auto; cursor:default;
  --tx:0px; --ty:0px;
  transition:transform .95s cubic-bezier(.34,1.56,.64,1), opacity .5s ease, filter .3s ease;
  transition-delay:var(--delay,0s);
}
.zh-const__stage.open .zh-node{
  transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
  opacity:1;
  animation:zhNodePulse 4s ease-in-out infinite;
  animation-delay:var(--pulse-delay,0s);
}
.zh-node img{ width:100%; height:100%; object-fit:contain; transition:opacity .25s; }
.zh-node:hover{
  transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.32) !important;
  z-index:20; animation:none !important;
  filter:drop-shadow(0 6px 18px rgba(94,148,235,.6));
}
.zh-node__label{
  position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:var(--fg); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.zh-node:hover .zh-node__label{ opacity:1; }
@keyframes zhNodePulse{
  0%,100%{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); filter:drop-shadow(0 0 0 transparent); }
  50%   { transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.12); filter:drop-shadow(0 4px 14px rgba(94,148,235,.45)); }
}
/* Dekoratif halkalar */
.zh-const__stage::before, .zh-const__stage::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px dashed rgba(94,148,235,.16); border-radius:50%; pointer-events:none;
}
.zh-const__stage::before{ width:64%; height:64%; }
.zh-const__stage::after{ width:92%; height:92%; }
@media(prefers-reduced-motion:reduce){
  .zh-node{ transition:opacity .4s ease; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
  .zh-const__stage.open .zh-node{ animation:none; }
  .zh-const__center{ animation:none; }
}
@media(max-width:600px){
  .zh-const__center{ width:120px; height:120px; }
  .zh-const__center img{ width:58px; height:58px; }
  .zh-node{ width:34px; height:34px; }
}