/* ============================================================
   HadyGel — Kurumsal tanıtım sitesi (landing) stilleri
   tokens.css üstüne biner (aynı renk/font değişkenleri)
   ============================================================ */

.site { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11"; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ── Navbar ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.nav-in { height: 68px; display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--slate-600); cursor: pointer; text-decoration: none; transition: color .14s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-burger { display: none; }
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-actions .b-ghost { display: none; }
}

.mobile-menu { display: none; border-top: 1px solid var(--hairline); background: #fff; padding: 10px 16px 16px; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 6px; font-size: 15px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--hairline); text-decoration: none; }

/* ── Hero ── */
.hero-sec { position: relative; overflow: hidden; background: linear-gradient(165deg, #14223D 0%, #0F172A 60%, #0B1020 100%); }
.hero-sec::before { content: ''; position: absolute; top: -200px; right: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(240,83,28,0.4), transparent 64%); }
.hero-sec::after { content: ''; position: absolute; bottom: -240px; left: -160px; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(240,83,28,0.16), transparent 64%); }
.hero-in { position: relative; padding: 104px 0 92px; }
.hero-h1 { margin: 0; color: #fff; font-size: 58px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; max-width: 760px; }
.hero-h1 .accent { color: var(--coral-400); }
.hero-lead { color: rgba(255,255,255,0.72); font-size: 19px; line-height: 1.55; margin: 22px 0 0; max-width: 540px; }
@media (max-width: 720px) { .hero-in { padding: 64px 0 56px; } .hero-h1 { font-size: 38px; } .hero-lead { font-size: 16px; } }

/* arama kutusu */
.searchbar { display: flex; align-items: stretch; gap: 8px; padding: 8px; background: #fff; border-radius: 18px; box-shadow: 0 28px 70px -24px rgba(0,0,0,0.55); max-width: 720px; margin-top: 34px; }
.searchbar .sb-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 14px; }
.searchbar .sb-field + .sb-field { border-left: 1px solid var(--hairline); }
.searchbar .sb-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--slate-400); text-transform: uppercase; }
.searchbar .sb-val { font-size: 15px; font-weight: 500; color: var(--ink); }
@media (max-width: 640px) {
  .searchbar { flex-direction: column; }
  .searchbar .sb-field + .sb-field { border-left: none; border-top: 1px solid var(--hairline); }
}
.pop-chips { display: flex; align-items: center; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.pop-chip { font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); padding: 6px 13px; border-radius: 999px; cursor: pointer; }

/* ── Section ── */
.sec { padding: 92px 0; }
@media (max-width: 720px) { .sec { padding: 60px 0; } }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral-600); font-weight: 500; }
.h-sec { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; margin: 11px 0 0; line-height: 1.12; }
@media (max-width: 720px) { .h-sec { font-size: 26px; } }

/* kartlar */
.cards { display: grid; gap: 18px; }
.cat-card { padding: 22px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-card:hover { border-color: var(--coral-200); box-shadow: var(--sh-md); transform: translateY(-2px); }
.salon-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.salon-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* görsel placeholder (çizgili) */
.ph { position: relative; background-color: var(--slate-100); background-image: repeating-linear-gradient(135deg, rgba(15,23,42,0.045) 0 10px, transparent 10px 20px); display: flex; align-items: center; justify-content: center; }
.ph .ph-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-400); }

.darksec { background: var(--ink); color: #fff; }
.foot { background: var(--ink); color: #fff; padding: 56px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot a { display: block; color: rgba(255,255,255,0.6); font-size: 13.5px; text-decoration: none; padding: 5px 0; cursor: pointer; }
.foot a:hover { color: #fff; }
.foot-h { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; }

.ph-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto}
.ph-col{display:flex;flex-direction:column;gap:14px}
.ph-head{display:flex;flex-direction:column;gap:3px;text-align:center}
.ph-body{flex:1;border:1px solid;border-radius:22px;padding:20px 18px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.04);min-height:280px}
.bub{align-self:flex-start;max-width:88%;background:rgba(255,255,255,.09);color:rgba(255,255,255,.82);padding:11px 15px;border-radius:16px 16px 16px 5px;font-size:13.5px;line-height:1.5}
.bub.me{align-self:flex-end;background:var(--coral-500);color:#fff;border-radius:16px 16px 5px 16px;position:relative}
.bub-tag{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:5px}
.ph-end{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid;border-radius:12px;font-size:15px;font-weight:700}
.lost-box{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:46px;padding:28px;border-radius:var(--r-xl);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.lost-inputs{display:flex;flex-direction:column;gap:22px}
.lost-out{display:flex;flex-direction:column;align-items:flex-start}
.rng.dark{background:rgba(255,255,255,.15)}
@media (max-width:760px){.ph-compare{grid-template-columns:1fr}.lost-box{grid-template-columns:1fr;gap:24px}}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--slate-200);outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--coral-500);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(15,23,42,.28)}
.rng::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--coral-500);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(15,23,42,.28)}

html { scroll-behavior: smooth; }
#root { height: auto; min-height: 100vh; }

/* ── B2B: özellik / fiyat / blog / iletişim ── */
.feat-card { padding: 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; display: flex; flex-direction: column; gap: 13px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.feat-card:hover { border-color: var(--coral-200); box-shadow: var(--sh-md); transform: translateY(-2px); }

.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.alt-row.rev .alt-art { order: -1; }
@media (max-width: 860px) { .alt-row { grid-template-columns: 1fr; gap: 26px; } .alt-row.rev .alt-art { order: 0; } }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.price-card { border: 1px solid var(--hairline); border-radius: var(--r-xl); background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.price-card.pop { border: 2px solid var(--coral-500); box-shadow: var(--sh-md); }
.price-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; margin: 0 auto; }
.price-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--slate-700); line-height: 1.4; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.blog-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.blog-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.biz-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 36px; align-items: center; }
@media (max-width: 820px) {
  .biz-grid { grid-template-columns: 1fr; gap: 28px; }
  .biz-grid .biz-art { display: none; }
}

/* ── Rendevy ekosistemi ── */
.eco-sec .wrap{position:relative}
.eco-links-abs{position:absolute;top:-58px;right:0;z-index:5}
@media(max-width:900px){.eco-links-abs{position:static;margin-bottom:28px;display:flex;justify-content:center}}
.eco-sec{background:linear-gradient(165deg,#0B1220 0%,#141C2E 55%,#0B1220 100%);position:relative;overflow:hidden}
.eco-sec::before{content:'';position:absolute;top:-140px;right:-100px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(240,83,28,.22),transparent 66%);pointer-events:none}
.eco-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch;margin-bottom:52px}
.eco-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.eco-tag-old{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5)}
.eco-tag-new{background:linear-gradient(135deg,#14B8A6,#0F766E);color:#fff}
.eco-old,.eco-new{border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:24px 22px;background:rgba(255,255,255,.03);min-height:340px;display:flex;flex-direction:column}
.eco-new{border-color:rgba(20,184,166,.4);background:rgba(20,184,166,.06)}
.eco-old-list{display:flex;flex-direction:column;gap:11px;flex:1}
.eco-old-row{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:14.5px}
.eco-x{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;flex:none}
.eco-old-foot,.eco-new-foot{font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.eco-new-foot{color:var(--coral-300)}
.eco-arrow{align-self:center;width:52px;height:52px;border-radius:50%;background:var(--coral-500);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 12px 30px -8px rgba(240,83,28,.6)}
.eco-new-list{flex:1;display:flex;flex-direction:column;gap:12px;justify-content:center}
.eco-new-row{display:flex;align-items:center;gap:12px;color:#fff;font-size:15px;font-weight:600}
.eco-num{width:26px;height:26px;border-radius:8px;background:rgba(20,184,166,.18);color:#2DD4BF;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.eco-phone{flex:1;min-width:0;background:#0B1220;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.eco-phone-front{border-color:rgba(45,212,191,.4);box-shadow:0 16px 40px -16px rgba(45,212,191,.35)}
.eco-search{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-size:11.5px;font-weight:500}
.eco-phone-top{display:flex;align-items:center;gap:7px;color:#fff}
.eco-brand-dot{width:10px;height:10px;border-radius:50%;background:#2DD4BF}
.eco-salon{display:flex;align-items:center;gap:10px;color:#fff;padding:10px;background:rgba(255,255,255,.05);border-radius:11px}
.eco-salon-av{width:34px;height:34px;border-radius:10px;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.eco-slots{display:flex;gap:6px;margin-top:auto}
.eco-slot{flex:1;text-align:center;padding:8px 0;border-radius:9px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.08)}
.eco-slot.on{background:var(--coral-500);color:#fff;border-color:var(--coral-500)}
.eco-cta{text-align:center;padding:11px;border-radius:11px;background:#2DD4BF;color:#07211F;font-weight:700;font-size:13px}
.eco-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.eco-stat{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px 22px;background:rgba(255,255,255,.03)}
.eco-stat-ico{width:44px;height:44px;border-radius:13px;background:rgba(240,83,28,.16);color:var(--coral-400);display:flex;align-items:center;justify-content:center}
@media(max-width:900px){
  .eco-flow{grid-template-columns:1fr;gap:16px}
  .eco-arrow{transform:rotate(90deg);margin:0 auto}
  .eco-old,.eco-new{min-height:0}
  .eco-stats{grid-template-columns:1fr}
  .eco-phones{flex-direction:column}
}

/* gerçek uygulama ekranları */
.eco-shot{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.eco-shot img{width:100%;display:block;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#0B1220;box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.eco-shot-front img{border-color:rgba(45,212,191,.45);box-shadow:0 20px 46px -18px rgba(45,212,191,.4)}
.eco-shot figcaption{text-align:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:-.01em}
.eco-shot-front figcaption{color:#2DD4BF}
@media(max-width:900px){.eco-phones{flex-direction:row}}
@media(max-width:560px){.eco-phones{flex-direction:column}.eco-shot img{max-width:280px;margin:0 auto}}

.eco-steps{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.eco-steps .eco-shot img{max-width:none}
@media(max-width:560px){.eco-steps .eco-shot img{max-width:280px;margin:0 auto}}

.eco-shot figcaption{font-size:11px}
@media(max-width:560px){.eco-phones{flex-wrap:wrap;justify-content:center}.eco-shot{flex:0 0 44%}}

/* tam genişlik ekran şeridi */
.eco-strip{margin:0 0 52px}
.eco-strip-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.eco-strip-title{min-width:0}
.eco-shots{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.eco-shots{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.eco-shots{grid-template-columns:repeat(2,1fr);gap:12px}}

.eco-links{display:flex;gap:10px;flex-wrap:wrap}
.eco-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;transition:background .15s,border-color .15s}
.eco-link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.eco-link-web{background:linear-gradient(135deg,#14B8A6,#0F766E);border-color:transparent}
.eco-link-web:hover{background:linear-gradient(135deg,#2DD4BF,#14B8A6);border-color:transparent}

@media(max-width:640px){.eco-strip-head{flex-direction:column;align-items:flex-start}.eco-link{padding:9px 14px;font-size:12.5px}}

.eco-lockup-abs{position:absolute;top:0;right:0;display:flex}
@media(max-width:900px){.eco-lockup-abs{position:static;justify-content:center;margin-bottom:22px}}

.hero-stores{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero-stores-label{font-size:13px;color:rgba(255,255,255,.5)}

.hero-preview-row{display:flex;align-items:center;gap:24px;margin-top:48px;justify-content:center}
.store-badge{display:inline-flex;align-items:center;gap:11px;padding:14px 20px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;flex:none;transition:background .15s,border-color .15s,transform .15s}
.store-badge:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.store-badge span{display:flex;flex-direction:column;line-height:1.2;font-size:15px;font-weight:700;white-space:nowrap}
.store-badge small{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.04em}
@media(max-width:1120px){.hero-preview-row{flex-direction:column;gap:18px}.store-badge{order:2}}

.nav-stores{display:flex;gap:6px;margin-right:6px}
.nav-store{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hairline);color:var(--ink);background:#fff;transition:background .15s,border-color .15s}
.nav-store:hover{background:var(--slate-50);border-color:var(--slate-300)}
@media(max-width:920px){.nav-stores{display:none}}

.hero-stores-abs{position:absolute;top:28px;right:24px;display:flex;gap:12px;z-index:5}
@media(max-width:1120px){.hero-stores-abs{position:static;justify-content:center;margin-bottom:28px}}

/* ══ Bölüm ritmi ══
   Komşu bölümler asla aynı tonda olmasın; her bölüm kendi panelinde okunsun. */

/* koyu bölümler arası ince sınır + ton farkı */
.hero-sec{border-bottom:1px solid rgba(255,255,255,.07)}

/* Hatırlatma — hero'dan bir ton AÇIK (ayrışsın) */
.nf-sec{background:#141D31;border-bottom:1px solid rgba(255,255,255,.07)}
.nf-sec::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(240,83,28,.5),transparent);pointer-events:none}

/* Ekosistem — en KOYU ton (hatırlatmadan ayrışsın) */
.eco-sec{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.eco-sec::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.45),transparent);pointer-events:none;z-index:2}

/* açık bölümler — hafif tint + hairline çerçeve */
.sec-tint{background:var(--slate-50);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}

/* Adımlar (koyu) — üstündeki açık bölümden net ayrıl */
.darksec{border-top:1px solid rgba(255,255,255,.07)}

/* nefes payı */
.sec{padding:104px 0}
@media(max-width:720px){.sec{padding:64px 0}}

/* bölüm başlıklarında tutarlı ritim */
.sec .h-sec{margin-top:12px}

/* anchor'lara sticky navbar payı */
section[id]{scroll-margin-top:88px}

/* ══ Kaydırma ile beliren bölümler ══ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
  .reveal.in{opacity:1;transform:none}
  /* bölüm içinde sıralı gecikme */
  .reveal-d1{transition-delay:.08s}
  .reveal-d2{transition-delay:.16s}
  .reveal-d3{transition-delay:.24s}
}