/* ============================================================
   WeOnix — site.css
   Statik kurumsal site tasarim sistemi
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --accent:      #FDBC07;
  --accent-soft: #FFD34D;
  --accent-deep: #C98F00;
  --accent-tint: #FFF6DC;

  --ink:      #16130E;
  --ink-2:    #3A342B;
  --muted:    #6E675C;
  --muted-2:  #928B7F;

  --dark:     #0D0D0D;
  --dark-2:   #171614;
  --dark-3:   #232120;
  --on-dark:  #F7F4EC;
  --on-dark-mu: rgba(247,244,236,.62);

  --cream:    #FAF7F0;
  --cream-2:  #F3EFE5;
  --white:    #FFFFFF;

  --line:     rgba(22,19,14,.10);
  --line-2:   rgba(22,19,14,.06);
  --line-dark:rgba(255,255,255,.09);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-sm: 0 2px 8px rgba(22,19,14,.05);
  --sh:    0 8px 30px rgba(22,19,14,.08);
  --sh-lg: 0 24px 70px rgba(22,19,14,.12);
  --sh-accent: 0 10px 30px rgba(253,188,7,.30);

  --head-h: 76px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px); }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- 3. LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }
.section{ padding:88px 0; }
.section--tight{ padding:60px 0; }
.section--cream{ background:var(--cream); }
.section--cream2{ background:var(--cream-2); }
.section--dark{ background:var(--dark); color:var(--on-dark); }

.eyebrow{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.eyebrow--accent{ color:var(--accent-deep); }
.section--dark .eyebrow{ color:var(--on-dark-mu); }

.h-xl{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.06; }
.h-lg{ font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:800; letter-spacing:-.025em; line-height:1.14; }
.h-md{ font-size:clamp(1.2rem,2vw,1.55rem); font-weight:700; letter-spacing:-.02em; }
.lead{ font-size:1.02rem; color:var(--muted); max-width:58ch; }
.section--dark .lead{ color:var(--on-dark-mu); }
.sec-head{ max-width:720px; margin-bottom:44px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.stack-sm > * + *{ margin-top:14px; }
.stack > * + *{ margin-top:20px; }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:600; letter-spacing:-.01em;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn i{ font-size:.95em; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--accent{ background:var(--accent); color:var(--ink); box-shadow:var(--sh-accent); }
.btn--accent:hover{ background:var(--accent-soft); }

.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:var(--ink-2); }

.btn--ghost{ background:var(--white); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--ink); background:var(--white); }

.btn--wa{ background:#25D366; color:#fff; }
.btn--wa:hover{ background:#1FBE5A; }

.section--dark .btn--outline,
.btn--outline-light{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.section--dark .btn--outline:hover,
.btn--outline-light:hover{ border-color:var(--on-dark); background:rgba(255,255,255,.06); }

.btn--sm{ padding:10px 18px; font-size:.83rem; }
.btn--lg{ padding:16px 30px; font-size:.98rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9rem; color:var(--ink);
}
.link-arrow i{ transition:transform .25s var(--ease); }
.link-arrow:hover i{ transform:translateX(5px); }
.section--dark .link-arrow{ color:var(--accent); }

/* ---------- 5. HEADER ---------- */
.site-head{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow .3s;
}
.site-head.is-stuck{ box-shadow:0 4px 24px rgba(22,19,14,.07); }
.head-inner{ height:var(--head-h); display:flex; align-items:center; gap:26px; }

.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand img{ width:30px; height:30px; object-fit:contain; }
.brand span{ font-size:1.2rem; font-weight:800; letter-spacing:-.035em; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:var(--r-sm);
  font-size:.875rem; font-weight:500; color:var(--ink-2);
  transition:color .2s, background .2s;
}
.nav-link:hover,
.nav-item.is-open > .nav-link,
.nav-link.is-active{ color:var(--ink); background:var(--cream-2); }
.nav-link.is-active{ font-weight:600; }
.nav-link i{ font-size:.6rem; transition:transform .25s var(--ease); opacity:.55; }
.nav-item.is-open .nav-link i{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:288px; padding:10px;
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s, transform .22s var(--ease), visibility .22s;
}
.nav-item.is-open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dd-link{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:var(--r-sm); transition:background .2s; }
.dd-link:hover{ background:var(--cream); }
.dd-ico{
  flex-shrink:0; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; font-size:.85rem;
  background:var(--accent-tint); color:var(--accent-deep);
}
.dd-t{ font-size:.86rem; font-weight:600; line-height:1.35; }
.dd-s{ font-size:.76rem; color:var(--muted); line-height:1.4; }

.head-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }

.burger{
  display:none; width:42px; height:42px; border-radius:var(--r-sm);
  border:1px solid var(--line); align-items:center; justify-content:center;
  font-size:1.05rem; margin-left:auto;
}

/* NOT: .drawer <header> DISINDA, <body> altinda durmali.
   .site-head'deki backdrop-filter, icindeki position:fixed elemanlar icin
   containing block olusturur ve draweri header yuksekligine hapseder. */
.drawer{
  position:fixed; inset:var(--head-h) 0 0; z-index:880;
  background:var(--white);
  padding:22px 26px calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:none; flex-direction:column;
}
@supports (height:100dvh){
  .drawer{ max-height:calc(100dvh - var(--head-h)); }
}
.drawer.is-open{ display:flex; animation:drawerIn .28s var(--ease); }
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.d-link{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:15px 4px; font-size:1rem; font-weight:600;
  border-bottom:1px solid var(--line-2); text-align:left;
}
.d-link i{ font-size:.7rem; opacity:.5; transition:transform .25s var(--ease); }
.d-link.is-open i{ transform:rotate(180deg); }
.d-sub{ display:none; padding:6px 0 12px 14px; border-bottom:1px solid var(--line-2); }
.d-sub.is-open{ display:block; }
.d-sub a{ display:block; padding:10px 0; font-size:.9rem; color:var(--muted); font-weight:500; }
.d-cta{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
body.no-scroll{ overflow:hidden; }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--on-dark);
  padding:82px 0 74px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.90) 38%,rgba(10,10,10,.45) 72%,rgba(10,10,10,.62) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:620px; }
.hero .eyebrow{ color:var(--on-dark-mu); }
.hero h1{
  font-size:clamp(2.35rem,5.6vw,4.05rem);
  font-weight:800; line-height:1.06; letter-spacing:-.035em;
  text-transform:uppercase; margin-bottom:22px;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{ font-size:1.06rem; color:var(--on-dark-mu); max-width:44ch; margin-bottom:32px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* Gorsel ekran kenarina degil icerik alaninin (--maxw) sag kenarina hizalanir;
   aksi halde genis ekranlarda metinden kopup kenara yapisiyordu. */
.hero-visual{
  position:absolute; z-index:1; top:50%; transform:translateY(-50%);
  right:max(26px, calc((100vw - var(--maxw)) / 2 + 26px));
  width:min(36%, 440px);
}
.hero-visual::before{
  content:""; position:absolute; inset:6% 2% 2%; z-index:-1;
  background:radial-gradient(closest-side, rgba(253,188,7,.26), rgba(253,188,7,.07) 60%, transparent 82%);
  filter:blur(8px);
}
.hero-visual img{
  width:100%; height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
/* Not .hero-visual icinde: monitorun solundaki bos alana, ekranin disina oturur */
.hero-note{
  position:absolute; z-index:3; left:-22%; bottom:4%;
  font-family:"Caveat",cursive; font-size:1.55rem; line-height:1.35;
  color:var(--on-dark); transform:rotate(-5deg); text-align:left;
}
.hero-note svg{ margin-top:2px; width:150px; color:var(--accent); }

/* ---------- 7. PLACEHOLDER GORSEL ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(253,188,7,.16) 0%, rgba(253,188,7,0) 55%),
    linear-gradient(150deg,#2A2724 0%,#141312 55%,#0B0B0A 100%);
  display:grid; place-items:center;
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 70% at 50% 45%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 0%,transparent 100%);
}
.ph-inner{ position:relative; z-index:2; text-align:center; padding:26px; }
.ph-inner img{ width:54px; margin:0 auto 12px; opacity:.9; }
.ph-label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.36); font-weight:600; }
.ph--light{ background:linear-gradient(150deg,#EFE9DA 0%,#E3DCCB 100%); }
.ph--light .ph-label{ color:rgba(22,19,14,.34); }
.ph--light::before{ background-image:linear-gradient(rgba(22,19,14,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,19,14,.05) 1px,transparent 1px); }

/* ---------- 8. TRUST BAR ---------- */
.trustbar{ background:var(--cream); border-bottom:1px solid var(--line-2); }
.trust-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:26px 0;
}
.trust-item{ display:flex; align-items:center; gap:12px; padding:4px 20px; }
.trust-item + .trust-item{ border-left:1px solid var(--line-2); }
.trust-ico{
  flex-shrink:0; width:38px; height:38px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:.92rem;
  background:var(--white); color:var(--ink); border:1px solid var(--line-2);
}
.trust-t{ font-size:.85rem; font-weight:600; line-height:1.3; }
.trust-s{ font-size:.76rem; color:var(--muted); line-height:1.35; }

/* ---------- 9. URUN SEKMELERI ---------- */
.tabs{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:6px; box-shadow:var(--sh);
}
.tab{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:var(--r); text-align:left;
  transition:background .25s, color .25s, box-shadow .25s;
}
.tab-ico{ flex-shrink:0; width:32px; height:32px; display:grid; place-items:center; font-size:1.05rem; opacity:.75; }
.tab-t{ font-size:.94rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.tab-s{ font-size:.76rem; color:var(--muted); line-height:1.3; }
.tab:hover{ background:var(--cream); }
.tab.is-active{ background:var(--accent); box-shadow:var(--sh-accent); }
.tab.is-active .tab-ico{ opacity:1; }
.tab.is-active .tab-s{ color:rgba(22,19,14,.7); }

.tabpanel{ display:none; }
.tabpanel.is-active{ display:block; animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- 10. URUN DETAY ---------- */
.product-grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px; align-items:start; }
.feat-list{ margin-top:26px; }
.feat{ display:flex; align-items:flex-start; gap:14px; padding:11px 0; }
.feat-ico{
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; font-size:.9rem;
  background:var(--white); border:1px solid var(--line-2); color:var(--ink);
}
.section--cream .feat-ico{ background:var(--white); }
.feat-t{ font-size:.92rem; font-weight:600; line-height:1.35; }
.feat-s{ font-size:.82rem; color:var(--muted); line-height:1.45; }
.feat-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.product-visual{ aspect-ratio:16/10; }
/* Seffaf urun gorseli: cerceve/zemin yok, dogrudan bolum zemininde durur.
   drop-shadow alfa kanalini izledigi icin kutu degil cihazin golgesi olusur. */
.product-shot{
  margin:0; aspect-ratio:auto;
  display:grid; place-items:center;
  background:none; border:0; border-radius:0; padding:0;
}
.product-shot img{
  width:auto; max-width:100%; max-height:430px; height:auto;
  filter:drop-shadow(0 24px 28px rgba(22,19,14,.22));
}

/* ---------- 11. FIYAT KARTLARI ---------- */
.price-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.price-card{
  position:relative; background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r); padding:22px 20px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  /* Yan yana kartlarda butonlar ayni hizada dursun diye alta itiliyor */
  display:flex; flex-direction:column;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.price-card.is-featured{ border-color:var(--accent); box-shadow:var(--sh); }
.price-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--ink);
  font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill); white-space:nowrap;
}
.price-tier{ font-size:.86rem; font-weight:600; color:var(--muted); }
.price-amount{ font-size:1.9rem; font-weight:800; letter-spacing:-.04em; line-height:1.2; margin:4px 0 2px; }
.price-note{ font-size:.78rem; color:var(--muted); min-height:34px; line-height:1.4; margin-bottom:14px; }
.price-card .btn{ margin-top:auto; }
.price-foot{ font-size:.76rem; color:var(--muted); text-align:center; margin-top:14px; }

.price-features{ margin:16px 0 14px; }
.price-features li{ display:flex; gap:9px; align-items:flex-start; font-size:.85rem; padding:5px 0; color:var(--ink-2); }
.price-features i{ color:var(--accent-deep); font-size:.8rem; margin-top:5px; }

/* ---------- 12. SEKTORLER ---------- */
.sector-layout{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:48px; align-items:center; }
.sector-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sector-card{
  position:relative; aspect-ratio:3/4; border-radius:var(--r);
  overflow:hidden; display:flex; align-items:flex-end;
  transition:transform .32s var(--ease);
}
.sector-card:hover{ transform:translateY(-6px); }
.sector-card .ph{ position:absolute; inset:0; border-radius:0; }
.sector-card::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(8,8,8,.85) 0%,rgba(8,8,8,.15) 55%,transparent 100%);
}
.sector-name{
  position:relative; z-index:3; width:100%; padding:16px 14px;
  font-size:.88rem; font-weight:700; color:#fff; letter-spacing:-.015em;
}
.sector-card--more{ background:var(--dark-2); }
.sector-card--more::after{ display:none; }
.sector-more-in{
  position:relative; z-index:3; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--on-dark-mu); font-size:.82rem; font-weight:500;
}
.sector-more-in i{ font-size:1.1rem; color:var(--accent); }

/* ---------- 13. ISTATISTIK ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.stat{ display:flex; align-items:center; gap:12px; padding:22px 20px; }
.stat + .stat{ border-left:1px solid var(--line-2); }
.stat-ico{
  flex-shrink:0; width:40px; height:40px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:.95rem;
  background:var(--accent-tint); color:var(--accent-deep);
}
.stat-n{ font-size:1.12rem; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.stat-l{ font-size:.78rem; color:var(--muted); line-height:1.35; }

/* ---------- 14. KOYU BANT ---------- */
.band-card{
  background:var(--cream); color:var(--ink);
  border-radius:var(--r-lg); padding:28px 26px; width:100%;
}
.band-card .dd-ico{ width:42px; height:42px; border-radius:12px; font-size:1rem; margin-bottom:14px; }
.band-card h3{ font-size:1.05rem; margin-bottom:8px; }
.band-card p{ font-size:.86rem; color:var(--muted); margin-bottom:18px; }

/* ---------- 15. REFERANS ŞERİDİ (KAYAN YAZI) ---------- */
.refstrip{
  display:flex; align-items:stretch;
  background:var(--dark-2); color:var(--on-dark);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
}
.refstrip-label{
  flex:0 0 auto; display:flex; align-items:center;
  padding:0 26px; min-height:62px;
  background:var(--accent); color:var(--ink);
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap;
}
.marquee{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
}
.marquee-track{
  display:flex; width:max-content;
  /* Sure marka sayisina gore ayarlanir: ~65 px/sn okunabilir hiz verir. */
  animation:marquee-scroll 66s linear infinite;
}
.refstrip:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; flex:0 0 auto; }
.logo-mark{
  position:relative; padding:0 30px;
  font-size:.95rem; font-weight:600; letter-spacing:-.02em;
  color:var(--on-dark); opacity:.72;
  transition:opacity .25s, color .25s;
  white-space:nowrap;
}
.logo-mark:hover{ opacity:1; color:var(--accent); }
.logo-mark::after{
  content:""; position:absolute; right:-3px; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--accent); opacity:.5;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
}

/* ---------- 16. SSS ---------- */
.faq-layout{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) minmax(0,.78fr); gap:40px; align-items:start; }
.faq-list{ border-top:1px solid var(--line-2); }
.faq-item{ border-bottom:1px solid var(--line-2); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:18px 4px; text-align:left;
  font-size:.94rem; font-weight:600; letter-spacing:-.015em;
  transition:color .2s;
}
.faq-q:hover{ color:var(--accent-deep); }
.faq-q i{ flex-shrink:0; font-size:.78rem; color:var(--muted); transition:transform .3s var(--ease); }
.faq-item.is-open .faq-q i{ transform:rotate(45deg); color:var(--accent-deep); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ font-size:.89rem; color:var(--muted); padding:0 4px 20px; line-height:1.65; }

.faq-card{ background:var(--accent-tint); border-radius:var(--r-lg); padding:26px 24px; }
.faq-card h3{ font-size:1rem; margin-bottom:8px; }
.faq-card p{ font-size:.85rem; color:var(--muted); margin-bottom:18px; }
.faq-card .btn{ width:100%; }
.faq-card .link-arrow{ display:flex; justify-content:center; margin-top:14px; font-size:.85rem; }

/* ---------- 17. CTA SERIDI ---------- */
.cta-strip{
  background:var(--accent); border-radius:var(--r-xl);
  padding:46px 44px; display:flex; flex-wrap:wrap; gap:26px;
  align-items:center; justify-content:space-between;
}
.cta-strip h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:8px; }
.cta-strip p{ font-size:.95rem; color:rgba(22,19,14,.72); max-width:52ch; }
.cta-strip .btn--dark{ box-shadow:0 10px 30px rgba(22,19,14,.18); }

/* ---------- 18. FOOTER ---------- */
.site-foot{ background:var(--dark); color:var(--on-dark); padding:66px 0 0; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.1fr); gap:36px; padding-bottom:48px; }
.foot-brand .brand span{ color:var(--on-dark); }
.foot-brand p{ font-size:.86rem; color:var(--on-dark-mu); margin-top:14px; max-width:30ch; }
.foot-h{ font-size:.83rem; font-weight:700; margin-bottom:16px; letter-spacing:-.01em; }
.foot-links li + li{ margin-top:10px; }
.foot-links a{ font-size:.84rem; color:var(--on-dark-mu); transition:color .2s; }
.foot-links a:hover{ color:var(--accent); }
.foot-social{ display:flex; gap:10px; margin-top:4px; }
.foot-social a{
  width:38px; height:38px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:.92rem;
  border:1px solid var(--line-dark); color:var(--on-dark-mu);
  transition:border-color .25s, color .25s, background .25s;
}
.foot-social a:hover{ border-color:var(--accent); color:var(--accent); background:rgba(253,188,7,.08); }
.foot-contact{ margin-top:18px; }
.foot-contact a{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--on-dark-mu); padding:4px 0; }
.foot-contact a:hover{ color:var(--accent); }
.foot-contact i{ width:16px; text-align:center; color:var(--accent); font-size:.8rem; }

.foot-bottom{
  border-top:1px solid var(--line-dark); padding:20px 0;
  display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between;
  font-size:.79rem; color:var(--on-dark-mu);
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-legal a:hover{ color:var(--accent); }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:800;
  width:46px; height:46px; border-radius:var(--r-pill);
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh);
  display:grid; place-items:center; font-size:.9rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent); border-color:var(--accent); }

/* ---------- 19. IC SAYFA BASLIGI ---------- */
.page-head{ background:var(--dark); color:var(--on-dark); padding:64px 0 60px; position:relative; overflow:hidden; }
.page-head::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle,rgba(253,188,7,.16),transparent 62%);
}
.page-head-in{ position:relative; z-index:2; max-width:720px; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--on-dark-mu); margin-bottom:16px; }
.crumbs a:hover{ color:var(--accent); }
.crumbs i{ font-size:.55rem; opacity:.5; }
.page-head h1{ font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.032em; margin-bottom:14px; }
.page-head p{ font-size:1rem; color:var(--on-dark-mu); max-width:56ch; }

/* ---------- 20. KART IZGARALARI ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.card{
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.card h3{ font-size:1.02rem; margin-bottom:8px; }
.card p{ font-size:.87rem; color:var(--muted); line-height:1.6; }
.card-ico{
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--accent-tint); color:var(--accent-deep);
}
.card-list{ margin-top:14px; }
.card-list li{ display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--ink-2); padding:4px 0; }
.card-list i{ color:var(--accent-deep); font-size:.78rem; margin-top:5px; }

/* ---------- 21. ILETISIM ---------- */
.contact-layout{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:start; }
.contact-list{ margin-top:26px; }
.contact-row{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--line-2);
}
.contact-row:last-child{ border-bottom:0; }
.contact-row .dd-ico{ width:40px; height:40px; border-radius:11px; }
.contact-row .dd-t{ font-size:.9rem; }
.contact-row .dd-s{ font-size:.78rem; }

.form-card{
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-xl); padding:32px 30px; box-shadow:var(--sh);
}
.field{ position:relative; margin-bottom:16px; }
.field label{
  display:block; font-size:.79rem; font-weight:600;
  color:var(--ink-2); margin-bottom:7px;
}
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:var(--cream);
  font-size:.9rem; transition:border-color .22s, background .22s;
}
.field textarea{ resize:vertical; min-height:118px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); background:var(--white);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--muted); margin:6px 0 18px; }
.consent input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; width:16px; height:16px; }
.consent a{ color:var(--accent-deep); text-decoration:underline; }
.form-note{ font-size:.78rem; color:var(--muted); text-align:center; margin-top:12px; }

/* ---------- 22. SURECLER / ADIMLAR ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ position:relative; padding-top:34px; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:0; left:0;
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:var(--accent-deep);
}
.step::after{
  content:""; position:absolute; top:9px; left:34px; right:-18px; height:1px;
  background:var(--line);
}
.step:last-child::after{ display:none; }
.step h3{ font-size:.98rem; margin-bottom:8px; }
.step p{ font-size:.85rem; color:var(--muted); line-height:1.6; }
.section--dark .step p{ color:var(--on-dark-mu); }
.section--dark .step::after{ background:var(--line-dark); }

/* ---------- 23. REVEAL ---------- */
/* JS calismiyorsa .js sinifi hic eklenmez -> icerik dogrudan gorunur kalir.
   JS yuklenip site.js calismazsa da 3sn sonra .no-anim devreye girer. */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.no-anim .reveal{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.is-in{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .btn:hover,.card:hover,.sector-card:hover,.price-card:hover{ transform:none; }
}

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1100px){
  .main-nav,.head-actions{ display:none; }
  .burger{ display:flex; }
  .product-grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .sector-layout{ grid-template-columns:1fr; gap:30px; }
  .faq-layout{ grid-template-columns:1fr; gap:30px; }
  .contact-layout{ grid-template-columns:1fr; gap:34px; }
  .foot-grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .hero-visual{ display:none; }
  .hero-note{ display:none; }
  .hero-bg::after{ background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,.97)); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .step:nth-child(2)::after{ display:none; }
}
@media (max-width:900px){
  .section{ padding:64px 0; }
  /* Urun paneli tek sutuna dusunce fiyatlar cok asagida kaliyordu.
     Sarmalayicilari display:contents ile cozup sirayi kullanicinin
     bekledigi hale getiriyoruz: once paketler, detaylar altinda.
     Gorsel su an placeholder oldugu icin en sona alindi. */
  .product-main,.product-side{ display:contents; }
  .product-grid{ gap:26px; }
  .product-head{ order:1; }
  .price-row{ order:2; margin-top:0; }
  .price-foot{ order:3; margin-top:0; }
  .product-lead{ order:4; margin-top:0 !important; }
  .feat-list{ order:5; margin-top:0; }
  .feat-cta{ order:6; margin-top:0; }
  .product-visual{ order:7; }
  .product-extra{ order:8; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); row-gap:4px; }
  .trust-item + .trust-item{ border-left:0; }
  .trust-item{ padding:10px 6px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat + .stat{ border-left:0; }
  .tabs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sector-cards{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  /* Fiyat kartlari her genislikte 3 sutun yan yana kalir (temel kural). */
  .cta-strip{ padding:34px 26px; }
}
@media (max-width:620px){
  .container{ padding-inline:20px; }
  .section{ padding:52px 0; }
  .hero{ padding:56px 0 52px; }
  .refstrip{ flex-direction:column; align-items:stretch; }
  .refstrip-label{ justify-content:center; min-height:0; padding:9px 20px; font-size:.64rem; }
  .marquee{ min-height:50px; }
  .logo-mark{ padding:0 20px; font-size:.88rem; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step::after{ display:none; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .field-row{ grid-template-columns:1fr; }
  .form-card{ padding:24px 20px; }
  .trust-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; }
  .to-top{ right:14px; bottom:14px; }

  /* Sekmeler: yan yana 5 kompakt buton (ikon ustte, kisa etiket altta) */
  .tabs{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:4px; }
  .tab{ flex-direction:column; align-items:center; gap:5px; padding:11px 3px; text-align:center; }
  .tab-ico{ width:auto; height:auto; font-size:1rem; }
  .tab-t{ font-size:.67rem; font-weight:600; line-height:1.25; }
  /* .tabs ile ozgullugu artiriyoruz: bolum 25 tab-s'i display:block yapiyor */
  .tabs .tab-s{ display:none; }

  /* Tek sutunda devlesen ogeleri ikiserli kaliba al */
  .sector-cards{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* Ikili kaliba gecince .stat'in sabit dolgusu 360px'te tasiyordu */
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:16px 10px; gap:9px; }
  .stat-ico{ width:32px; height:32px; font-size:.82rem; }
  .stat-n{ font-size:1rem; }
  .stat-l{ font-size:.72rem; }

  /* Fiyat kartlari mobilde de 3 sutun; sigmasi icin kompakt olculer */
  .price-row{ gap:7px; margin-top:18px; }
  .price-card{ padding:15px 9px 13px; border-radius:var(--r-sm); }
  .price-badge{ font-size:.5rem; letter-spacing:.05em; padding:3px 7px; top:-9px; }
  .price-tier{ font-size:.64rem; line-height:1.3; }
  .price-amount{ font-size:1rem; letter-spacing:-.03em; margin:5px 0 3px; }
  .price-note{ font-size:.62rem; min-height:0; line-height:1.35; margin-bottom:10px; }
  .price-features{ margin:10px 0; }
  .price-features li{ font-size:.62rem; gap:5px; padding:3px 0; line-height:1.35; }
  .price-features i{ font-size:.58rem; margin-top:4px; }
  .price-card .btn{ margin-top:auto; }
  .price-card .btn--sm{ padding:9px 4px; font-size:.68rem; white-space:normal; }
  .price-foot{ font-size:.68rem; }

  /* Butonlari bir tik kucult; tam genislikte fazla iri duruyorlardi */
  .btn{ padding:12px 20px; font-size:.86rem; }
  .btn--lg{ padding:14px 22px; font-size:.92rem; }
  .btn--sm{ padding:10px 16px; font-size:.8rem; }
  .hero-cta{ gap:10px; }
}

/* ---------- 25. INLINE ELEMAN DUZELTMELERI ---------- */
.dd-t,.dd-s,.trust-t,.trust-s,.tab-t,.tab-s,.feat-t,.feat-s,
.stat-n,.stat-l,.ph-inner,.ph-label,.sector-name,.sector-more-in{ display:block; }
.dd-link > span:last-child,.trust-item > span:last-child,
.tab > span:last-child,.feat > span:last-child,.stat > span:last-child{ display:block; min-width:0; }
.hero-bg,.hero-bg.ph{ border-radius:0; }
.sector-more-in{ display:flex; }
.steps--vertical{ grid-template-columns:1fr; row-gap:22px; }
.steps--vertical .step::after{ display:none; }
.hero-bg.ph{ position:absolute; inset:0; }
.contact-row > span:last-child{ display:block; min-width:0; }

/* ---------- 26. HUKUKI METIN SAYFALARI ---------- */
.legal{ max-width:840px; margin-inline:auto; }
.legal h2{ font-size:1.14rem; font-weight:700; margin:38px 0 12px; letter-spacing:-.02em; }
.legal p{ font-size:.93rem; color:var(--ink-2); line-height:1.8; margin-bottom:14px; }
.legal ul{ margin:0 0 18px; }
.legal ul li{ position:relative; padding-left:22px; font-size:.93rem; color:var(--ink-2); line-height:1.75; margin-bottom:8px; }
.legal ul li::before{ content:""; position:absolute; left:4px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.legal a{ color:var(--accent-deep); text-decoration:underline; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal-date{ font-size:.82rem; color:var(--muted); margin-bottom:28px; }
.legal-note{ margin-top:36px; padding:22px 24px; background:var(--cream); border-radius:var(--r-lg); border-left:3px solid var(--accent); }
.legal-note p{ margin:0; font-size:.88rem; color:var(--muted); }

/* ---------- SAG TIK BILDIRIMI ---------- */
.ctx-toast{
  position:fixed; left:50%; bottom:28px; z-index:1000;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--r-sm);
  background:var(--ink); color:var(--white);
  border:1px solid rgba(255,255,255,.14);
  font-size:.86rem; font-weight:500; box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transform:translate(-50%,12px);
  transition:opacity .22s, transform .22s var(--ease);
  max-width:calc(100vw - 32px);
}
.ctx-toast.is-on{ opacity:1; transform:translate(-50%,0); }
.ctx-toast i{ color:var(--accent); }
/* iOS'ta gorsele uzun basinca cikan "Kaydet" menusunu kapat */
img{ -webkit-touch-callout:none; }

/* ---------- AYNALI URUN IZGARASI ----------
   Genis ekranda gorsel solda, metin sagda. HTML sirasi (metin once)
   korunur: ekran okuyucu/SEO ve 1100px alti tek sutunda metin once gelir. */
@media (min-width:1101px){
  .product-grid--flip{ grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
  .product-grid--flip > :first-child{ order:2; }
}

/* ---------- ANA SAYFA SEKTOR SERIDI ----------
   Kartlar kaldirildi; baslik ve buton tek satirda, darda alt alta. */
.sector-intro{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px 48px;
}
.sector-intro .lead{ max-width:60ch; }

/* ---------- SOSYAL MEDYA PANELI (gorselsiz) ---------- */
.brand-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.brand-chip{
  font-size:.78rem; font-weight:600; padding:6px 12px;
  border-radius:var(--r-pill); background:var(--cream-2); color:var(--ink-2);
}
.product-extra:hover{ transform:none; }
@media (min-width:901px){
  .product-extra + .product-extra{ margin-top:18px; }
}

/* ---------- WEONIX NE DEMEK (hakkimizda) ----------
   Logo We / On / i / X parcalarina bolunur; her parca kendi anlamiyla. */
.name-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.name-part{
  text-align:center; padding:32px 20px 28px;
  border-radius:var(--r-lg); background:var(--dark-2); border:1px solid var(--line-dark);
}
.name-glyph{ height:96px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:24px; }
.name-glyph img{ height:100%; width:auto; max-width:100%; object-fit:contain; }
.name-part h3{ font-size:1.08rem; margin-bottom:8px; color:var(--on-dark); }
.name-part p{ font-size:.86rem; color:var(--on-dark-mu); line-height:1.6; }
@media (max-width:900px){ .name-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .name-glyph{ height:70px; margin-bottom:18px; }
  .name-part{ padding:24px 14px 22px; }
}

/* ---------- HIZMETLER (ana sayfa, kaydirdikca adim adim) ----------
   Solda yapiskan baslik, sagda numarali adimlar. Her adim ekrana
   girdikce yandan kayarak gelir; soldaki ray kaydirmayla dolar. */
.svc-layout{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:56px; align-items:start;
}
.svc-head{ position:sticky; top:calc(var(--head-h) + 40px); }
.svc-legend{ margin-top:18px; font-size:.82rem; color:var(--muted); }
.svc-legend .svc-badge{ margin:0 4px 0 0; vertical-align:1px; }

.svc-track{ position:relative; }
.svc-rail{
  position:absolute; top:28px; bottom:28px; left:27px; width:2px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.svc-rail-fill{
  position:absolute; inset:0; background:var(--accent);
  transform-origin:top; transform:scaleY(var(--svc-p,0));
}
.svc-steps{ display:grid; gap:18px; }
.svc-step{
  position:relative; display:grid; grid-template-columns:56px minmax(0,1fr);
  gap:4px 20px; align-items:start;
}
.svc-num{
  grid-column:2; grid-row:1; font-size:.74rem; font-weight:800;
  letter-spacing:.08em; color:var(--accent-deep); padding-left:24px;
}
.svc-ico{
  grid-column:1; grid-row:1 / span 2; position:relative; z-index:1;
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-size:1.2rem; background:var(--white); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:background .4s var(--ease), border-color .4s, color .4s;
}
.svc-step.is-in .svc-ico{ background:var(--accent); border-color:var(--accent); }
.svc-body{
  grid-column:2; background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm);
}
.svc-body h3{ font-size:1.06rem; margin-bottom:8px; }
.svc-body p{ font-size:.88rem; color:var(--muted); line-height:1.6; }
.svc-badge{
  display:inline-block; margin-bottom:10px; padding:3px 10px;
  border-radius:var(--r-pill); font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:var(--ink);
}
.svc-badge--pro{ background:var(--ink); color:var(--accent); }

/* One cikan adim: yapay zekali destek hatti */
.svc-step--hl .svc-body{
  background:var(--dark); border-color:var(--dark); color:var(--on-dark);
  box-shadow:var(--sh-lg);
  background-image:radial-gradient(120% 140% at 100% 0%, rgba(253,188,7,.22) 0%, rgba(253,188,7,0) 55%);
}
.svc-step--hl .svc-body p{ color:var(--on-dark-mu); }

/* Adim adim gelis: genel .reveal'in yerine yandan kayma */
.js .svc-step.reveal{ transform:translateX(42px); }
.js .svc-step.reveal.is-in{ transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

@media (max-width:900px){
  .svc-layout{ grid-template-columns:1fr; gap:34px; }
  .svc-head{ position:static; }
}
@media (max-width:620px){
  .svc-step{ grid-template-columns:44px minmax(0,1fr); gap:4px 14px; }
  .svc-ico{ width:44px; height:44px; border-radius:13px; font-size:1rem; }
  .svc-rail{ left:21px; top:22px; bottom:22px; }
  .svc-body{ padding:18px 18px; }
  .svc-num{ padding-left:18px; }
  .js .svc-step.reveal{ transform:translateX(24px); }
}
@media (prefers-reduced-motion:reduce){
  .js .svc-step.reveal{ transform:none; }
}

/* ---------- INFLUENCER KARTI (sosyal medya sekmesi) ---------- */
.infl-card{ border-color:var(--accent); box-shadow:var(--sh); }
.infl-tag{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--ink);
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}

/* ---------- FAREYI IZLEYEN 3B EGIM ([data-tilt]) ----------
   Egim acisini site.js yazar; burada perspektif ve yumusak donus var.
   Fare uzerindeyken gecis kisa (takip), cikinca uzun (yerine oturma). */
[data-tilt]{ perspective:1100px; }
[data-tilt] img{
  transform-style:preserve-3d; will-change:transform;
  transition:transform .7s var(--ease), filter .7s var(--ease);
}
[data-tilt].is-tilting img{ transition:transform .12s linear, filter .12s linear; }

/* ---------- MENU: ONE CIKAN BAGLANTI ---------- */
.nav-link--hot i{ color:var(--accent-deep); font-size:.72rem; margin-right:2px; }

/* ---------- INFLUENCER MARKETING (ana sayfa, one cikanlar) ---------- */
.infl{ position:relative; overflow:hidden; }
.infl::before{
  content:""; position:absolute; inset:-30% -10% auto auto; width:60%; aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(253,188,7,.16), transparent 70%);
  pointer-events:none;
}
.infl .container{ position:relative; }
.infl-head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:22px 56px; align-items:end;
}
.infl-head h2 em{ font-style:normal; color:var(--accent); }
.infl-head .infl-tag{ margin-bottom:16px; }
.infl-platforms{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.infl-platforms span{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:var(--r-pill); border:1px solid var(--line-dark);
  font-size:.84rem; font-weight:500; color:var(--on-dark);
}
.infl-platforms i{ color:var(--accent); }
.infl-sub{
  margin:52px 0 18px; font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-mu);
}
.infl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.infl-feat{
  position:relative; padding:26px 24px; border-radius:var(--r-lg);
  background:var(--dark-2); border:1px solid var(--line-dark);
  transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.infl-feat:hover{ transform:translateY(-5px); border-color:rgba(253,188,7,.45); background:var(--dark-3); }
.infl-feat h3{ font-size:1.04rem; margin-bottom:8px; color:var(--on-dark); }
.infl-feat p{ font-size:.87rem; color:var(--on-dark-mu); line-height:1.6; }
.infl-feat .card-list li{ color:var(--on-dark); }
.infl-feat .card-list i{ color:var(--accent); }
.infl-feat--big{
  grid-row:span 2;
  background:linear-gradient(160deg, rgba(253,188,7,.20) 0%, rgba(253,188,7,.04) 45%, var(--dark-2) 100%);
  border-color:rgba(253,188,7,.35);
}
.infl-feat--big h3{ font-size:1.3rem; }
.infl-ico{
  width:46px; height:46px; border-radius:13px; margin-bottom:18px;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--accent); color:var(--ink);
}
.infl-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 36px;
  margin-top:40px; padding:30px 32px; border-radius:var(--r-xl);
  background:var(--accent); color:var(--ink);
}
.infl-cta h3{ font-size:1.2rem; margin-bottom:6px; }
.infl-cta p{ font-size:.9rem; color:var(--ink-2); }
.infl-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.infl-cta .btn--accent{ background:var(--ink); color:var(--white); box-shadow:none; }
.infl-cta .btn--accent:hover{ background:var(--ink-2); }
.infl-cta .btn--outline-light{ color:var(--ink); border-color:rgba(22,19,14,.25); }
.infl-cta .btn--outline-light:hover{ border-color:var(--ink); background:rgba(255,255,255,.35); }
@media (max-width:900px){
  .infl-head{ grid-template-columns:1fr; }
  .infl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .infl-feat--big{ grid-row:auto; grid-column:1 / -1; }
}
@media (max-width:620px){
  .infl-grid{ grid-template-columns:1fr; }
  .infl-cta{ padding:24px 20px; }
  .infl-cta-btns .btn{ width:100%; }
}

/* ---------- SCROLL ANIMASYON VARYASYONLARI ----------
   site.js basliklari, kartlari ve listeleri otomatik .reveal yapar;
   data-rv ile yon secilir, --rv-d ile kardesler sirayla (stagger) gelir. */
.js .reveal{ transition-delay:var(--rv-d,0s); }
.js .reveal[data-rv="left"]{ transform:translateX(-36px); }
.js .reveal[data-rv="right"]{ transform:translateX(36px); }
.js .reveal[data-rv="zoom"]{ transform:scale(.94); }
.js .reveal.is-in[data-rv]{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal[data-rv]{ transform:none; }
}

/* ---------- CANLI DESTEK ---------- */
.to-top{ bottom:92px; }
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:1.35rem;
  background:var(--accent); color:var(--ink); box-shadow:var(--sh-accent), var(--sh);
  transition:transform .25s var(--ease);
}
.chat-fab:hover{ transform:scale(1.06); }
.chat-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); animation:chatPulse 2.4s var(--ease) infinite;
}
.chat-fab.is-open::after,.chat-fab.is-open .chat-fab-dot{ display:none; }
.chat-fab-dot{
  position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%;
  background:#22C55E; border:2px solid var(--white);
}
.chat-fab-hint{
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  white-space:nowrap; padding:9px 14px; border-radius:var(--r-pill);
  background:var(--white); color:var(--ink); font-size:.8rem; font-weight:600;
  box-shadow:var(--sh); border:1px solid var(--line-2);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.chat-fab-hint.is-on{ opacity:1; }
@keyframes chatPulse{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.45); opacity:0; }
}

.chat{
  position:fixed; right:22px; bottom:92px; z-index:950;
  width:min(380px, calc(100vw - 28px)); height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98); transform-origin:bottom right;
  transition:opacity .25s, transform .25s var(--ease), visibility .25s;
}
.chat.is-open{ opacity:1; visibility:visible; transform:none; }
.chat-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--dark); color:var(--on-dark);
}
.chat-av{
  position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:.84rem; font-weight:700;
  background:var(--accent); color:var(--ink);
}
.chat-av::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
  border-radius:50%; background:#22C55E; border:2px solid var(--dark);
}
.chat-who{ flex:1 1 auto; min-width:0; line-height:1.3; }
.chat-name{ display:block; font-weight:700; font-size:.92rem; }
.chat-role{ display:block; font-size:.74rem; color:var(--on-dark-mu); }
.chat-x{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--on-dark); background:rgba(255,255,255,.08);
}
.chat-x:hover{ background:rgba(255,255,255,.16); }
.chat-log{
  flex:1 1 auto; overflow-y:auto; padding:16px; background:var(--cream);
  display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain;
}
.chat-msg{
  max-width:85%; padding:10px 14px; border-radius:16px;
  font-size:.86rem; line-height:1.5; animation:chatIn .25s var(--ease);
}
.chat-msg--bot{ align-self:flex-start; background:var(--white); border:1px solid var(--line-2); border-bottom-left-radius:5px; }
.chat-msg--me{ align-self:flex-end; background:var(--ink); color:var(--white); border-bottom-right-radius:5px; }
.chat-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chat-actions .btn{ padding:8px 14px; font-size:.78rem; }
.chat-chips{ display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:100%; animation:chatIn .25s var(--ease); }
.chat-chip{
  padding:7px 12px; border-radius:var(--r-pill); font-size:.78rem; font-weight:500;
  background:var(--white); border:1px solid var(--accent); color:var(--ink);
}
.chat-chip:hover{ background:var(--accent); }
.chat-typing{ display:inline-flex; gap:4px; align-items:center; padding:13px 14px; }
.chat-typing span{
  width:7px; height:7px; border-radius:50%; background:var(--muted-2);
  animation:chatDot 1.2s infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatDot{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
@keyframes chatIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line-2); background:var(--white); }
.chat-form input{
  flex:1 1 auto; min-width:0; padding:11px 14px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:var(--cream); font-size:.88rem;
}
.chat-form input:focus{ outline:none; border-color:var(--accent); background:var(--white); }
.chat-send{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:var(--ink);
}
.chat-note{ padding:0 14px 10px; font-size:.68rem; color:var(--muted-2); text-align:center; background:var(--white); }
.chat-note a{ color:var(--accent-deep); text-decoration:underline; }
@media (max-width:620px){
  .chat-fab{ right:14px; bottom:14px; width:54px; height:54px; }
  .to-top{ bottom:80px; }
  .chat{ right:10px; bottom:78px; width:calc(100vw - 20px); height:min(560px, calc(100vh - 96px)); }
  .chat-fab-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .chat-fab::after,.chat-msg,.chat-chips{ animation:none; }
}

/* ---------- SADE / GUCLU / GUVENILIR (ana sayfa) ----------
   Eski koyu bant + "urun fotografi" yer tutucusunun yerine: gorsel
   gerektirmeyen acik zeminli uc sutun. Influencer bolumu zaten koyu. */
.pillars-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.9fr);
  gap:40px; align-items:center;
}
.pillars-text h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-.03em; margin-bottom:16px; }
.pillars-text h2 em{ font-style:normal; color:var(--accent-deep); }
.pillars-list{ display:grid; gap:14px; }
.pillar{
  display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
  border-radius:var(--r-lg); background:var(--cream); border:1px solid var(--line-2);
}
.pillar-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--ink); color:var(--accent); font-size:1rem;
}
.pillar h3{ font-size:1rem; margin-bottom:4px; }
.pillar p{ font-size:.86rem; color:var(--muted); line-height:1.55; }
.band-card--accent{ background:var(--accent); border-color:var(--accent); box-shadow:var(--sh-accent); }
.band-card--accent p{ color:var(--ink-2); }
.band-card--accent .dd-ico{ background:var(--ink); color:var(--accent); }
@media (max-width:1100px){
  .pillars-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pillars-text{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .pillars-grid{ grid-template-columns:1fr; gap:26px; }
}