/* ===========================================================================
   PENTA-STYLE LAYER  —  loaded AFTER main.css, rewrites the visual language.
   Reference: pentayazilim.com
     · uniform near-black canvas, no alternating light bands
     · very large, LIGHT-weight display type (300) with tight tracking
     · full-viewport statement sections whose words brighten on scroll
     · minimal nav: logo | phone · globe · purple pill · burger
     · hairline-divided service grid, vivid rounded feature panels
     · staggered two-column reference grid, oversized footer links
   =========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg:        #090B10;
  --surface:   #101219;
  --surface-2: #14161F;
  --surface-3: #1A1D28;

  --text:    #FFFFFF;
  --muted:   #9BA1AE;
  --muted-2: #6E7482;

  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);

  --violet: #6C35B2;
  --indigo: #3C43DD;
  --lilac:  #DCAADC;

  --font-head: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* K1 — sağda solda ölü alan olmayacak. Penta'nın kendi değeri 1680px;
     1360'a sıkıştırmak geniş ekranda iki yanda boşluk bırakıyordu. */
  --container: 1680px;
  --pad-x: clamp(20px, 3.2vw, 56px);
  --section: clamp(88px, 11vw, 180px);   /* Penta breathes: huge vertical rhythm */
  --radius: 28px;
  --radius-lg: 20px;

  --grad-btn: linear-gradient(90deg, #601799 0%, #3C43DD 100%);
  --glass-bg: rgba(255,255,255,.03);
}

/* ---------- canvas: flat and dark, faint nebula only ---------- */
.aurora-bg { background: var(--bg); }
.aurora-mesh { display: block; opacity: .5; }
.aurora-orb { opacity: .24; filter: blur(140px); }
.noise-overlay { opacity: .018; }
body { background: var(--bg); font-feature-settings: "cv11", "ss01"; }

/* ---------- typography: light, large, tight ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.08;
}
h3, h4, h5 { font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
b, strong { font-weight: 500; }

.h-display, .hero-title, .hero h1 { font-weight: 300; letter-spacing: -.035em; line-height: 1.02; }
.section-head { max-width: 1080px; gap: 22px; margin-bottom: clamp(60px, 7.5vw, 108px); }
.section-head h2 { font-size: clamp(33px, 5.1vw, 74px); font-weight: 400; letter-spacing: -.028em; line-height: 1.06; }
.section-head p { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; max-width: 720px; }
.lead { color: var(--muted); font-weight: 300; }

/* Toserof'un degrade başlık vurgusu KORUNUR — yalnızca yeni mor palete alındı */
.grad-text, .h-display .grad-text, .shimmer-text {
  background: linear-gradient(120deg, #C6B2E8 0%, #DCAADC 55%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: none; font-weight: inherit;
}
.section-head h2::after { background: var(--grad-btn); height: 2px; }

/* eyebrow: Toserof'un hap etiketi geri geldi, yeni mor palette */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(167,139,250,.10); border: 1px solid rgba(167,139,250,.24);
  padding: 7px 15px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lilac);
}
.eyebrow .dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
/* hero'da Penta'nın sade, iri etiketi kalsın */
.hero-eyebrow {
  background: none; border: none; padding: 0; text-transform: none;
  letter-spacing: 0; border-radius: 0;
}
.hero-eyebrow-sep { display: inline-block; width: 6px; }

/* ---------- nav: Toserof'un yüzen bulanık hap çubuğu KORUNUR ----------
   Ekip bunu özellikle istedi: sayfayı takip eden, arkası bulanık, yuvarlak
   kenarlı menü. main.css'teki yapı aynen kalıyor; buraya yalnızca Penta'dan
   devraldığımız tipografi ve mor CTA ekleniyor. */
/* pill navbar kalıyor (Sefa Bey) ama içerik genişliğiyle hizalansın — K1 */
.nav-inner { gap: 20px; max-width: min(var(--container), calc(100% - clamp(20px, 3.2vw, 56px))); }
.nav-links { display: flex; }
.nav-links > li > a {
  font-family: var(--font-body); font-weight: 400; font-size: 14.5px;
  letter-spacing: -.005em; color: rgba(255,255,255,.78);
}
.nav-links > li > a:hover, .nav-links > li > a.active { color: #fff; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); }
.nav-phone svg { width: 16px; height: 16px; color: var(--lilac); }
.nav-phone:hover { color: #fff; }
@media (max-width: 1400px) { .nav-phone { display: none; } }
.nav-cta {
  background: var(--grad-btn); color: #fff;
  padding: 11px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .005em;
  box-shadow: 0 8px 22px -10px rgba(60,67,221,.7);
  transition: filter .25s ease, box-shadow .25s ease, transform .25s ease;
}
.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 26px rgba(108,53,178,.55); }
.nav-cta svg { display: inline-block; width: 13px; height: 13px; }
/* hamburger yalnızca mobilde (masaüstünde bağlantılar açıkta) */
.nav .hamburger { flex-direction: column; gap: 5px; }
.nav .hamburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------- hero: full viewport, left aligned, oversized ---------- */
main { padding-top: clamp(88px, 8vw, 150px); }
/* the home hero runs full-bleed underneath the transparent bar */
.hero-has-video { margin-top: calc(-1 * clamp(88px, 8vw, 150px)); }

.hero, .hero-pro, .hero-has-video {
  min-height: 100svh; display: flex; align-items: center;
  padding-top: clamp(100px, 9vw, 170px); padding-bottom: clamp(90px, 9vw, 140px);
}
.hero:not(.hero-has-video) { min-height: 0; padding-top: clamp(40px, 5vw, 80px); }
/* Hero metni videonun ÜSTÜNDE kalmalı. .hero-video (z:0) ve .hero-scrim (z:1)
   konumlandırılmış; metin sarmalayıcıları konumlandırılmazsa z-index yok sayılır
   ve yazı videonun arkasında kaybolur. Her genişlikte geçerli olmalı. */
.hero-has-video > .container,
.hero-pro .hero-grid,
.hero-has-video .hero-left { position: relative; z-index: 2; }

.hero-has-video .hero-left { max-width: none; }
/* Penta: kicker is 36px at weight 100, headline 100px at weight 400, leading-none */
.hero-has-video .hero-title, .hero-title, .hero h1 {
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.03;
  margin-bottom: clamp(24px, 2.4vw, 38px); max-width: 20ch;
}
.hero .lead {
  font-size: clamp(15px, 1.25vw, 18px); font-weight: 300;
  color: rgba(255,255,255,.62); max-width: 540px; margin-bottom: clamp(26px, 2.6vw, 40px);
}
.hero-has-video .lead { color: rgba(255,255,255,.78); }
.hero-eyebrow {
  margin-bottom: clamp(14px, 1.6vw, 26px); display: block;
  font-size: clamp(17px, 2.1vw, 32px); font-weight: 300; color: rgba(255,255,255,.88);
}
/* video her genişlikte parlak bölgeler taşıyor — metin gölgesi her yerde açık kalsın */
.hero-has-video .hero-eyebrow { text-shadow: 0 1px 16px rgba(9,11,16,.9), 0 0 40px rgba(9,11,16,.55); }
.hero-has-video .hero-title { text-shadow: 0 2px 28px rgba(9,11,16,.8), 0 0 60px rgba(9,11,16,.5); }
.hero-has-video .lead { text-shadow: 0 1px 16px rgba(9,11,16,.85); }
/* the blinking type cursor Penta ends its headline with */
.hero-title .type-caret {
  display: inline-block; width: .42em; height: .055em; margin-left: .1em;
  background: #fff; vertical-align: baseline; animation: caret 1.1s steps(1) infinite;
}
.hero-btns { margin-bottom: 0; gap: 16px; }
@keyframes caret { 50% { opacity: 0; } }

/* trust row + secondary hero chrome recede */
.hero-trust { opacity: .85; }
.hero-scroll {
  left: 50%; bottom: 38px; transform: translateX(-50%);
  flex-direction: row; gap: 10px; font-size: 13px;
  font-weight: 300; letter-spacing: .01em; text-transform: none;
  color: rgba(255,255,255,.6);
}
.hero-scroll::before {
  content: ""; width: 15px; height: 23px; background: none;
  border: 1px solid rgba(255,255,255,.45); border-radius: 8px;
  animation: none; flex-shrink: 0; position: relative;
}
.hero-scroll::after {
  content: ""; position: absolute; left: 7px; top: 6px;
  width: 1.5px; height: 5px; background: rgba(255,255,255,.8); border-radius: 2px;
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(6px); opacity: .2; } }

/* ---------- inner-page header (Penta: centred light title + breadcrumb) ---------- */
.phead {
  padding-top: clamp(56px, 7vw, 112px);
  padding-bottom: clamp(72px, 9vw, 150px);
  text-align: center; position: relative;
}
.phead h1 {
  font-size: clamp(29px, 4.3vw, 60px); font-weight: 400;
  letter-spacing: -.03em; line-height: 1.12;
  max-width: 20ch; margin-inline: auto;
}
.phead-sub {
  margin-top: 22px; font-size: clamp(15px, 1.4vw, 20px); font-weight: 300;
  color: rgba(255,255,255,.6); max-width: 660px; margin-inline: auto; line-height: 1.55;
}
.phead-crumb {
  margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 300; color: rgba(255,255,255,.45);
}
.phead-crumb a { color: rgba(255,255,255,.45); transition: color .25s; }
.phead-crumb a:hover { color: #fff; }
.phead-crumb .sep { color: rgba(255,255,255,.25); }
.phead-crumb .cur { color: rgba(255,255,255,.72); }
.phead + .section { padding-top: 0; }

/* detay sayfaları: iki sütunlu hero yerine ortalanmış başlık + geniş çerçeve */
.pd-hero-flat { padding-top: 0; text-align: center; }
.pd-meta-center, .pd-cta-center, .pd-pills-center { justify-content: center; }
.pd-meta-center { margin-bottom: 30px; }
.pd-pills-center { margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.pd-cta-center { margin-bottom: clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 16px; }
.pd-frame-wide {
  max-width: 1120px; margin-inline: auto; text-align: left;
  border-radius: clamp(18px, 2vw, 30px); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 60px 140px -60px rgba(0,0,0,.9);
}
.pd-frame-wide .pd-frame-body img { width: 100%; height: auto; display: block; }
.pd-hero-flat .pd-orb { opacity: .12; }
@media (max-width: 560px) {
  .pd-cta-center { flex-direction: column; align-items: stretch; }
  .pd-cta-center .btn { width: 100%; }
}

/* sayfa içi eski satır-içi küçültmeleri ez — başlıklar tek ölçekte kalsın */
.section-head h2[style], .container > .section-head h2[style] { font-size: clamp(31px, 4.6vw, 64px) !important; }

/* ---------- STATEMENT: full-viewport line that brightens word by word ---------- */
.statement {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding-block: var(--section);
}
.statement-inner { max-width: 1240px; margin-inline: auto; }
/* Penta: text-22 (88px) at font-medium, leading 1.1, tracking -.01em */
.statement-text {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(28px, 4.9vw, 80px); line-height: 1.1; letter-spacing: -.015em;
}
.statement-text .w { color: rgba(255,255,255,.16); transition: color .18s linear; }
.statement-text .w.on { color: #fff; }
.statement-sub {
  margin-top: 38px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 300;
  color: rgba(255,255,255,.5); max-width: 640px; margin-inline: auto;
}
.statement-cta { margin-top: 46px; }

/* ---------- hairline service grid ---------- */
.pgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.pgrid-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: clamp(38px, 4.2vw, 62px) clamp(20px, 2.2vw, 34px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
  transition: background .4s ease;
}
.pgrid-cell:hover { background: rgba(255,255,255,.028); }
.pgrid-ico {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  color: rgba(255,255,255,.75); transition: border-color .4s, color .4s, transform .4s;
}
.pgrid-ico svg { width: 24px; height: 24px; }
.pgrid-cell:hover .pgrid-ico { border-color: var(--lilac); color: var(--lilac); transform: translateY(-3px); }
.pgrid-name { font-size: clamp(17px, 1.5vw, 22px); font-weight: 300; color: rgba(255,255,255,.72); letter-spacing: -.01em; transition: color .4s; }
.pgrid-cell:hover .pgrid-name { color: #fff; }
.pgrid-desc { font-size: 14px; font-weight: 300; color: var(--muted-2); line-height: 1.55; }
/* 3 sütunlu, daha iri hücreli varyant (hizmetler sayfası) */
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
.pgrid-cell-lg {
  align-items: flex-start; text-align: left; gap: 18px;
  padding: clamp(34px, 3.6vw, 56px) clamp(24px, 2.6vw, 40px);
  min-height: clamp(280px, 26vw, 380px); position: relative;
}
.pgrid-cell-lg .pgrid-ico { border-color: color-mix(in srgb, var(--ac) 40%, transparent); color: var(--ac); }
.pgrid-cell-lg:hover { background: color-mix(in srgb, var(--ac) 6%, transparent); }
.pgrid-cell-lg:hover .pgrid-ico { border-color: var(--ac); color: var(--ac); }
.pgrid-cell-lg .pgrid-name { font-size: clamp(20px, 1.9vw, 27px); font-weight: 400; color: #fff; }
.pgrid-cell-lg .pgrid-desc { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pgrid-foot {
  margin-top: auto; padding-top: 22px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pgrid-price { font-size: 14px; font-weight: 500; color: var(--ac); letter-spacing: -.01em; }
.pgrid-go {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: rgba(255,255,255,.7);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, color .4s, background .4s;
}
.pgrid-go svg { width: 15px; height: 15px; }
.pgrid-cell-lg:hover .pgrid-go { transform: translateX(4px); border-color: var(--ac); color: #fff; background: color-mix(in srgb, var(--ac) 55%, transparent); }

@media (max-width: 1100px) { .pgrid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pgrid-3 { grid-template-columns: 1fr; } .pgrid-cell-lg { min-height: 0; } }
@media (max-width: 520px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- vivid rounded feature panel ---------- */
.ppanel {
  border-radius: clamp(28px, 3vw, 46px); overflow: hidden; position: relative;
  padding: clamp(40px, 5.5vw, 88px);
  background: linear-gradient(128deg, #2A22C8 0%, #4A3BE8 42%, #6C35B2 100%);
  color: #fff;
}
.ppanel.alt { background: linear-gradient(128deg, #601799 0%, #3C43DD 100%); }
.ppanel.soft { background: linear-gradient(140deg, #E8E4F6 0%, #D7E6F2 55%, #EAE0F2 100%); color: #151026; }
.ppanel.soft .ppanel-body { color: #3A3550; }
.ppanel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 88% 12%, rgba(255,255,255,.22), transparent 62%);
}
.ppanel-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(26px, 3.5vw, 60px); align-items: start; }
.ppanel-title { font-size: clamp(24px, 2.7vw, 38px); font-weight: 300; letter-spacing: -.02em; line-height: 1.18; }
.ppanel-body { font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.9); }
.ppanel-rule { position: relative; z-index: 1; height: 1px; background: rgba(255,255,255,.28); margin-block: clamp(26px, 3vw, 44px); }
.ppanel.soft .ppanel-rule { background: rgba(21,16,38,.16); }
.ppanel-lead { position: relative; z-index: 1; font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.02em; margin-bottom: 6px; }
.ppanel-metrics { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px); }
.ppanel-metric b { display: block; font-size: clamp(30px, 3.6vw, 52px); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.ppanel-metric span { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.72); }
.ppanel.soft .ppanel-metric span { color: rgba(21,16,38,.6); }
@media (max-width: 820px) { .ppanel-grid { grid-template-columns: 1fr; } }

/* panel içi iki sütunlu "BİZ / SİZ" karşılaştırması (Toserof'un ortaklık modeli) */
.pp-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); }
.pp-col-tag {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.pp-col h4 { margin-top: 16px; font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.pp-col ul { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.pp-col li { display: flex; flex-direction: column; gap: 5px; padding-left: 18px; position: relative; }
.pp-col li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75);
}
.pp-col li b { font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; color: #fff; letter-spacing: -.01em; }
.pp-col li span { font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.78); }
@media (max-width: 700px) { .pp-split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- staggered reference grid (Penta: 2 cols, gap-18, aspect 31/28) ---------- */
.prefs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4.8vw, 72px); align-items: start; }
.pref { display: block; }
/* the left column drops instead of the right column rising, so nothing rides up over the heading */
.prefs > .pref:nth-child(2n+1) { transform: translateY(clamp(48px, 6.5vw, 104px)); }
.prefs { padding-bottom: clamp(48px, 6.5vw, 104px); }
.pref-media {
  position: relative; overflow: hidden; border-radius: 24px;
  aspect-ratio: 31 / 28; display: grid; place-items: center;
  background:
    radial-gradient(90% 120% at 50% -10%, color-mix(in srgb, var(--ac) 42%, transparent), transparent 70%),
    linear-gradient(160deg, #191C26 0%, #0E1016 100%);
  border: 1px solid var(--border);
  transition: border-color .5s ease;
}
.pref:hover .pref-media { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }
.pref-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.pref:hover .pref-media img { transform: scale(1.05); }
.pref-glow {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--ac) 30%, transparent), transparent 72%);
}
.pref:hover .pref-glow { opacity: 1; }
.pref-badge {
  position: relative; z-index: 1; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.pref-metric {
  position: absolute; z-index: 1; left: 26px; bottom: 24px;
  font-size: clamp(20px, 1.9vw, 28px); font-weight: 400; letter-spacing: -.02em; color: #fff;
}
.pref-metric small { display: block; font-size: 13px; font-weight: 300; color: rgba(255,255,255,.55); letter-spacing: 0; }
/* Penta: title 32px medium, subtitle 20px italic */
.pref-name { margin-top: 22px; font-size: clamp(19px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.pref-cat { margin-top: 5px; font-size: clamp(15px, 1.4vw, 20px); font-weight: 300; font-style: italic; color: rgba(255,255,255,.5); }
@media (max-width: 760px) {
  .prefs { grid-template-columns: 1fr; padding-bottom: 0; }
  .prefs > .pref:nth-child(2n+1) { transform: none; }   /* single column: no stagger */
}

/* ---------- buttons (Penta: 68px tall pills, 20px label) ---------- */
.btn {
  font-weight: 400; letter-spacing: .005em; border-radius: 999px;
  height: clamp(50px, 4.4vw, 68px); padding-inline: clamp(28px, 2.9vw, 46px);
  font-size: clamp(14.5px, 1.15vw, 18px);
}
.btn svg { display: inline-block; width: 15px; height: 15px; }
.btn-grad, .btn-primary {
  background: linear-gradient(to top right, #601799, #3C43DD);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 0 100px 0 rgba(108,53,178,.25), inset 0 4px 12px rgba(0,0,0,.25);
}
.btn-grad:hover { transform: none; filter: brightness(1.1); box-shadow: 0 0 90px 0 rgba(23,114,153,.85); }
.btn-lg { padding-inline: clamp(32px, 3.6vw, 56px); }
.btn-ghost {
  background: linear-gradient(to top, rgba(255,255,255,.1), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 400;
}
.btn-ghost:hover { background: transparent; transform: none; border-color: rgba(255,255,255,.3); }

/* ---------- kartlar: Toserof'un cam görünümü KORUNUR ---------- */
.glass {
  background: rgba(22,26,38,.55);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.card-hover:hover { border-color: rgba(255,255,255,.16); box-shadow: none; transform: translateY(-4px); }
.chip, .pd-tech-chip { background: rgba(255,255,255,.045); border: 1px solid var(--border); color: rgba(255,255,255,.7); font-weight: 400; }

/* ---------- ferah açık bant: Toserof'un nefes aldıran bölümleri geri ----------
   Penta baştan sona koyu akar; Toserof'un ritmi arada açık bir panelle kırılıyordu.
   Karışım: koyu tuval korunur, ama yorumlar ve SSS gibi bölümler yeniden
   yüzen açık panel olur — yalnızca lila tonuna alınmış hâliyle. */
.section-light, .pd-light {
  color: #171029; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F4F0FB 0%, #E9E2F5 100%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: clamp(22px, 3vw, 36px);
  margin-block: clamp(18px, 3vw, 40px);
  margin-inline: clamp(14px, 3.2vw, 48px);
  box-shadow: 0 50px 120px -50px rgba(0,0,0,.75);
  --text: #171029; --muted: #4E4668; --muted-2: #746B88;
  --border: rgba(23,16,41,.10); --border-strong: rgba(23,16,41,.18);
}
.section-light::before, .pd-light::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); pointer-events: none;
}
.section-light > .container, .pd-light > .container { position: relative; z-index: 1; }
.section-light h1, .section-light h2, .section-light h3, .section-light h4,
.pd-light h1, .pd-light h2, .pd-light h3, .pd-light h4 { color: #171029; }
.section-light p, .section-light cite, .pd-light p { color: #4E4668; }
.section-light .grad-text, .pd-light .grad-text {
  background: linear-gradient(120deg, #601799, #6C35B2 60%, #3C43DD);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-light .eyebrow, .pd-light .eyebrow {
  background: rgba(108,53,178,.10); border-color: rgba(108,53,178,.26); color: #601799;
}
.section-light .glass, .pd-light .glass {
  background: #FFFFFF; border-color: rgba(23,16,41,.09);
  box-shadow: 0 18px 44px -28px rgba(23,16,41,.32);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.section-light .faq-item, .pd-light .faq-item { background: #fff; border-bottom-color: rgba(23,16,41,.09); }
.section-light .faq-q, .pd-light .faq-q { color: #171029; }
.section-light .faq-a-inner, .pd-light .faq-a-inner { color: #4E4668; }
.section-light .btn-ghost, .pd-light .btn-ghost {
  color: #171029; border-color: rgba(23,16,41,.2); background: rgba(23,16,41,.03);
}
.section-light .chip, .pd-light .chip { background: rgba(23,16,41,.04); border-color: rgba(23,16,41,.1); color: #4E4668; }
.section + .section.section-light, .section-light + .section,
.section + .section.pd-light, .pd-light + .section { padding-top: var(--section); }

/* quote / statement card → plain giant text */
.quote-card { background: none; border: none; padding-block: clamp(40px, 6vw, 90px); }
.quote-card p { font-size: clamp(28px, 4.2vw, 58px); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.quote-card cite { font-weight: 300; color: rgba(255,255,255,.45); }

/* stat blocks: Penta counters are 120px, weight 400, leading-none, no boxes */
.stat-card, .glass.stat-card { background: none; border: none; padding: 0; }
.stat-card .num, .stat-num {
  font-weight: 400; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(42px, 6.4vw, 108px); color: #fff;
}
.stat-label { font-weight: 300; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--muted); margin-top: 12px; }
.stats-band { gap: clamp(24px, 4vw, 64px); }

/* ---------- oversized footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: clamp(64px, 8vw, 120px) 40px; background: var(--bg); }
.ft-grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.ft-contact { grid-column: 1; }                    /* contact tucks under the brand block */
.ft-contact h4 { font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.ft-mega { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(4px, .8vw, 12px); text-align: right; }
.ft-mega a {
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(28px, 3.7vw, 54px); letter-spacing: -.03em; line-height: 1.16;
  color: rgba(255,255,255,.62); transition: color .3s ease;
}
.ft-mega a:hover { color: #fff; }
.ft-mega .btn { margin-top: 26px; font-size: 15px; }
.ft-brand .nav-logo svg, .ft-brand .nav-logo img { height: 46px; }
.ft-desc { font-weight: 300; color: var(--muted); max-width: 420px; }
.ft-contact-row a, .ft-contact-row span { font-weight: 300; }
.ft-social { gap: 14px; }
.ft-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: rgba(255,255,255,.6); transition: color .3s, border-color .3s; }
.ft-social a:hover { color: #fff; border-color: var(--border-strong); }
.ft-bottom { border-top: 1px solid var(--border); margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; }
.ft-copy, .ft-legal a { font-weight: 300; font-size: 13.5px; color: var(--muted-2); }
@media (max-width: 820px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-mega { align-items: flex-start; text-align: left; }
}

/* ---------- fullscreen menu (the burger now opens it at every size) ---------- */
.mob-overlay {
  background: rgba(9,11,16,.975);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  padding: 34px var(--pad-x) 40px;
  transform: none; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.mob-overlay.open { transform: none; opacity: 1; visibility: visible; }
.mob-top { margin-bottom: clamp(34px, 5vw, 70px); }
.mob-close { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.06); }
.mob-nav { max-width: var(--container); width: 100%; margin-inline: auto; }
.mob-nav > a, .mob-acc-h {
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(23px, 2.9vw, 42px); letter-spacing: -.03em; line-height: 1.2;
  padding: clamp(5px, .7vw, 10px) 0; border-bottom: none;
  color: rgba(255,255,255,.62); transition: color .3s ease, padding-left .35s cubic-bezier(.16,1,.3,1);
}
.mob-nav > a:hover, .mob-acc-h:hover { color: #fff; padding-left: 16px; }
.mob-acc-ic { width: 22px; height: 22px; opacity: .5; }
.mob-acc.open .mob-acc-h { color: #fff; }
.mob-acc-body a { border-bottom: none; font-weight: 300; font-size: clamp(15px, 1.3vw, 18px); padding: 9px 0 9px 22px; color: rgba(255,255,255,.5); }
.mob-acc-body a.mob-acc-all { color: var(--lilac); font-weight: 400; }
.mob-lang { gap: 10px; margin-top: clamp(26px, 3vw, 44px); max-width: 220px; }
.mob-lang button { border-radius: 999px; font-weight: 400; }
.mob-lang button.active { background: var(--grad-btn); }
.mob-bottom { max-width: var(--container); width: 100%; margin-inline: auto; }
.mob-bottom .btn-block { width: auto; align-self: flex-start; padding-inline: 40px; }

/* ---------- floating action button ---------- */
.wa-float {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--grad-btn); box-shadow: 0 10px 34px -8px rgba(60,67,221,.7);
}
.wa-float svg { width: 25px; height: 25px; }

/* ---------- misc alignment with the reference ---------- */
.trusted-label { font-weight: 300; letter-spacing: .02em; text-transform: none; font-size: 15px; color: var(--muted); }
.faq-item { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.faq-q { font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); padding-block: 26px; }
.faq-a-inner { font-weight: 300; color: var(--muted); }
.section + .section { padding-top: var(--section); }

/* ---------- responsive corrections ---------- */
/* Tablet & phone: the hero video carries a bright watermark that lands right on
   the headline once the layout stacks. Deepen the scrim so type stays legible
   and the footage reads as texture, the way Penta darkens its hero photo. */
@media (max-width: 960px) {
  .hero-has-video .hero-scrim {
    display: block;
    background:
      linear-gradient(180deg,
        rgba(9,11,16,.88) 0%,
        rgba(9,11,16,.72) 24%,
        rgba(9,11,16,.76) 55%,
        rgba(9,11,16,.94) 86%,
        #090B10 100%),
      linear-gradient(90deg, rgba(9,11,16,.55) 0%, rgba(9,11,16,.18) 70%, rgba(9,11,16,0) 100%);
  }
  .hero-has-video .hero-title { text-shadow: 0 2px 26px rgba(9,11,16,.75); }
  .hero-has-video .lead { color: rgba(255,255,255,.72); text-shadow: 0 1px 14px rgba(9,11,16,.8); }
  .hero-has-video .hero-eyebrow { text-shadow: 0 1px 14px rgba(9,11,16,.8); }
}

/* stacked hero: tighten the vertical rhythm so the fold isn't mostly empty */
@media (max-width: 640px) {
  .hero, .hero-pro, .hero-has-video { padding-top: clamp(76px, 20vw, 104px); padding-bottom: clamp(56px, 14vw, 88px); }
  .hero-has-video .hero-title { font-size: clamp(31px, 8.6vw, 44px); margin-bottom: 18px; }
  .hero-has-video .hero-eyebrow { font-size: clamp(15px, 4.2vw, 19px); margin-bottom: 12px; }
  .hero-has-video .lead { font-size: 14.5px; margin-bottom: 26px; }
  .statement { min-height: 0; padding-block: clamp(72px, 18vw, 120px); }
  .statement-cta { margin-top: 32px; }
  .prefs { gap: 28px; }
  .pref-metric { left: 18px; bottom: 16px; }
  /* keep the legal row clear of the floating action button */
  .footer { padding-bottom: 104px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .type-caret, .hero-scroll::after { animation: none !important; }
  .statement-text .w { color: #fff !important; }
}