/* ============ TYPOGRAPHY (kullanıcı talebi) ============ */
*, *::before, *::after {
  font-family: "Galano Grotesque Alt", "Adjusted Trebuchet MS Fallback", "Trebuchet MS", sans-serif !important;
}

/* ============ TOKENS ============ */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f6f4;
  --ink:#0b1220;
  --ink-2:#475569;
  --ink-3:#94a3b8;
  --line:#e6e8ec;
  --line-2:#eef0f3;
  --accent:#F97316;
  --accent-ink:#0B1220;
  --container:1280px;
  --pad:clamp(20px,4vw,56px);
  --section:clamp(88px,11vw,144px);
  --radius:14px;
  --radius-sm:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-weight:400;line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:3px}

.container{
  max-width:var(--container);margin:0 auto;
  padding-left:var(--pad);padding-right:var(--pad);
  box-sizing:border-box;
}
@media (max-width:768px){
  :root{--pad:20px}
  .container{padding-left:20px !important;padding-right:20px !important}
}
@media (max-width:480px){
  :root{--pad:16px}
  .container{padding-left:16px !important;padding-right:16px !important}
}
.center{text-align:center}

h1,h2,h3,h4,h5{margin:0;color:var(--ink);letter-spacing:-.02em;font-weight:700;line-height:1.15}

/* small label */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-2);
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%}
.eyebrow.center{justify-content:center}

/* ============ NAV (Pro overlay) ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(10,10,10,0);
  backdrop-filter:saturate(180%) blur(0px);
  -webkit-backdrop-filter:saturate(180%) blur(0px);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .35s var(--ease),
             backdrop-filter .35s var(--ease),
             border-color .35s var(--ease);
}
.nav.is-scrolled,
.nav.is-light{
  background:rgba(251,251,253,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-inner{
  display:flex;align-items:center;
  height:78px;
  max-width:1320px;margin:0 auto;
  padding:0 32px;gap:0;
}
.brand{display:flex;align-items:center;flex:0 0 auto;margin-right:32px;position:relative}
.brand img{display:block;transition:opacity .25s var(--ease)}
.brand .logo-light,
.brand .logo-dark{height:54px;width:auto}
.brand .logo-light{position:absolute;inset:0;opacity:1;transition:opacity .35s var(--ease)}
.brand .logo-dark{opacity:0;transition:opacity .35s var(--ease)}
.brand .logo-compact{display:none;height:40px;width:40px}
.nav.is-scrolled .brand .logo-light,
.nav.is-light .brand .logo-light{opacity:0}
.nav.is-scrolled .brand .logo-dark,
.nav.is-light .brand .logo-dark{opacity:1}

.nav-links{
  display:none;flex:1;
  justify-content:center;align-items:center;
  gap:0;font-size:15px;font-weight:500;letter-spacing:-.005em;
}
.nav-links a{
  color:rgba(255,255,255,.88);
  padding:0 18px;line-height:78px;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .25s var(--ease),opacity .25s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav.is-scrolled .nav-links a,
.nav.is-light .nav-links a{color:rgba(0,0,0,.82)}
.nav.is-scrolled .nav-links a:hover,
.nav.is-light .nav-links a:hover{color:var(--accent)}
.nav-links a .chev{font-size:13px;opacity:.7;transition:transform .25s var(--ease)}
.nav-links a:hover .chev{transform:translateY(1px)}

.nav-cta-group{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav-cta-outline,
.nav-cta-fill{
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  padding:11px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.nav-cta-outline{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.32);
}
.nav-cta-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nav.is-scrolled .nav-cta-outline,
.nav.is-light .nav-cta-outline{color:var(--ink);border-color:rgba(0,0,0,.18)}
.nav.is-scrolled .nav-cta-outline:hover,
.nav.is-light .nav-cta-outline:hover{border-color:var(--ink);background:transparent}

.nav-cta-fill{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
}
.nav-cta-fill:hover{background:#fb923c;border-color:#fb923c;transform:translateY(-1px)}

.nav-lang{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.72);padding:0 14px;line-height:78px;
  border-left:1px solid rgba(255,255,255,.14);
  margin-left:6px;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.nav-lang:hover{color:#fff}
.nav.is-scrolled .nav-lang,
.nav.is-light .nav-lang{color:rgba(0,0,0,.6);border-left-color:rgba(0,0,0,.1)}
.nav.is-scrolled .nav-lang:hover,
.nav.is-light .nav-lang:hover{color:var(--accent)}

@media (min-width:960px){.nav-links{display:flex}.nav-burger{display:none}}

/* hamburger button (mobile only) */
.nav-burger{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  margin-left:auto;cursor:pointer;padding:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.nav-burger:hover{background:rgba(255,255,255,.06)}
.nav.is-scrolled .nav-burger,
.nav.is-light .nav-burger{border-color:rgba(0,0,0,.16)}
.nav.is-scrolled .nav-burger:hover,
.nav.is-light .nav-burger:hover{background:rgba(0,0,0,.04)}
.nav-burger span{
  position:relative;width:18px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease), background .25s var(--ease);
}
.nav-burger span::before,
.nav-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),top .25s var(--ease);
}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav.is-scrolled .nav-burger span,
.nav.is-light .nav-burger span,
.nav.is-scrolled .nav-burger span::before,
.nav.is-light .nav-burger span::before,
.nav.is-scrolled .nav-burger span::after,
.nav.is-light .nav-burger span::after{background:var(--ink)}
.nav.is-open .nav-burger span{background:transparent}
.nav.is-open .nav-burger span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav-burger span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.nav-drawer{
  position:fixed;inset:0;z-index:45;
  background:#0a0a0a;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
  display:flex;flex-direction:column;
  padding:100px 28px 32px;
}
.nav-drawer.is-open{opacity:1;pointer-events:auto}
.nav-drawer-links{display:flex;flex-direction:column;gap:4px;margin-bottom:32px}
.nav-drawer-links a{
  font-size:28px;font-weight:600;letter-spacing:-.02em;
  color:#fafaf7;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;align-items:center;
  transition:color .2s var(--ease);
}
.nav-drawer-links a:hover{color:var(--accent)}
.nav-drawer-links a .chev{font-size:22px;opacity:.5}
.nav-drawer-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.nav-drawer-cta a{
  text-align:center;padding:16px 22px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  transition:background .25s var(--ease);
}
.nav-drawer-cta .fill{background:var(--accent);color:#fff}
.nav-drawer-cta .fill:hover{background:#fb923c}
.nav-drawer-cta .outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.nav-drawer-cta .outline:hover{border-color:#fff}

/* mobile adjustments */
.nav-cta-mobile{display:none}
@media (max-width:959px){
  .nav-inner{height:88px;padding:0 16px;gap:8px}
  .brand{margin-right:0}
  .brand .logo-light,
  .brand .logo-dark{height:64px}
  .brand .logo-compact{display:none}
  .nav-cta-group{display:none}
  .nav-burger{
    display:inline-flex !important;
    margin-left:auto;
    width:46px;height:46px;border-radius:12px;
  }
  body.no-scroll{overflow:hidden}
}
@media (max-width:420px){
  .nav-inner{height:78px}
  .brand .logo-light,
  .brand .logo-dark{height:54px}
}

/* ============ HERO (Premium digital agency) ============ */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;
  padding:160px 0 120px;
  background:#08080c;
  isolation:isolate;
  text-align:left;
  color:#fafaf7;
  display:flex;flex-direction:column;justify-content:center;
  cursor:default;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 15% 30%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(700px 500px at 85% 70%, rgba(99,102,241,.18), transparent 65%),
    linear-gradient(180deg, #08080c 0%, #0a0a10 60%, #08080c 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(80% 70% at 30% 45%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 30% 45%, #000 30%, transparent 80%);
}
@media (max-width:768px){
  .hero::after{mask-image:none;-webkit-mask-image:none;opacity:.4}
}

/* spotlight & orbs intentionally removed (perf) */
.hero-spotlight,
.hero-orbs,
.hero-noise{display:none}

.hero .container{position:relative;z-index:1;max-width:1320px}

/* hero layout — symmetric stretch */
.hero-frame{
  display:grid;grid-template-columns:minmax(0,1fr);gap:48px;
  align-items:stretch;
}
@media (min-width:1080px){
  .hero-frame{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:72px;
    align-items:stretch;
  }
}
.hero-headline{display:flex;flex-direction:column;justify-content:center}

/* headline lines with reveal animation */
.hero h1,
.hero h1 .line > span,
.hero h1 .rotator,
.hero h1 .rotator .reel > span,
.hero h1 .stroke{
  font-family:"Unbounded","Galano Grotesque Alt","Trebuchet MS",sans-serif !important;
}
.hero h1{
  font-size:clamp(32px,4.4vw,72px);
  letter-spacing:-.045em;line-height:1;font-weight:900;
  color:#fafaf7;
  margin:0;
  display:flex;flex-direction:column;gap:0;
}
.hero h1 .line{
  display:block;overflow:hidden;
  padding:0 .02em .14em;
}
.hero h1 .line > span{
  display:inline-block;line-height:1;
  transform:translateY(120%);
  animation:lineUp 1.1s var(--ease) forwards;
}
.hero h1 .nowrap{white-space:nowrap}
.hero h1 .line:nth-of-type(1) > span{animation-delay:.15s}
.hero h1 .line:nth-of-type(2) > span{animation-delay:.30s}
.hero h1 .line:nth-of-type(3) > span{animation-delay:.45s}
.hero h1 .line:nth-of-type(4) > span{animation-delay:.60s}
@keyframes lineUp{to{transform:translateY(0)}}

.hero h1 .accent{color:var(--accent)}
.hero h1 .stroke{
  -webkit-text-stroke:1.5px rgba(250,250,247,.5);
  color:transparent;font-style:italic;
}

/* rotating word — masked vertical reel with smooth ease per step */
.rotator{
  display:inline-flex;vertical-align:baseline;
  height:1.18em;overflow:hidden;
  position:relative;color:var(--accent);
  line-height:1.18;
  font-weight:900;letter-spacing:-.05em;
}
.rotator .reel{
  display:flex;flex-direction:column;
  animation:reel 12s infinite;
}
.rotator .reel > span{
  display:block;line-height:1.18;height:1.18em;
  white-space:nowrap;
}
@keyframes reel{
  0%, 18%   { transform:translateY(0)        ; animation-timing-function: cubic-bezier(.7,.0,.3,1) }
  25%, 43%  { transform:translateY(-1.18em)  ; animation-timing-function: cubic-bezier(.7,.0,.3,1) }
  50%, 68%  { transform:translateY(-2.36em)  ; animation-timing-function: cubic-bezier(.7,.0,.3,1) }
  75%, 93%  { transform:translateY(-3.54em)  ; animation-timing-function: cubic-bezier(.7,.0,.3,1) }
  100%      { transform:translateY(-4.72em) }
}
/* if reduced motion, freeze first word visible */
@media (prefers-reduced-motion: reduce){
  .rotator .reel{animation:none}
  .hero h1 .line > span{transform:none;animation:none}
}

/* lede */
.hero p.lede{
  margin:36px 0 0;max-width:50ch;
  font-size:clamp(17px,1.4vw,21px);
  color:rgba(250,250,247,.68);line-height:1.5;font-weight:400;
  letter-spacing:-.005em;
  opacity:0;transform:translateY(20px);
  animation:fadeUp .9s var(--ease) .9s forwards;
}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* CTAs */
.hero-actions{
  display:inline-flex;flex-wrap:wrap;gap:14px;
  margin-top:40px;
  opacity:0;transform:translateY(20px);
  animation:fadeUp .9s var(--ease) 1.05s forwards;
}
.hero-actions .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:16px 28px;border-radius:999px;
  border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.hero-actions .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero-actions .btn-primary:hover{background:#fb923c;border-color:#fb923c;transform:translateY(-2px)}
.hero-actions .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.hero-actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hero-actions .btn .arrow{transition:transform .35s var(--ease)}
.hero-actions .btn:hover .arrow{transform:translateX(4px)}

/* right panel — service principles (matched visual weight) */
.hero-side{
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  opacity:0;transform:translateY(30px);
  animation:fadeUp 1s var(--ease) .8s forwards;
  min-width:0;max-width:100%;
}
.hero-headline{min-width:0;max-width:100%}
.hero-side .label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,250,247,.45);
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;
}
.hero-side .label::before{
  content:"";display:inline-block;width:28px;height:1px;background:var(--accent);
}
.principle{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:22px 22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
  position:relative;overflow:hidden;
  max-width:100%;
}
.principle > *{min-width:0}
.principle::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease);
}
.principle:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);transform:translateX(4px)}
.principle:hover::before{transform:scaleY(1);transform-origin:top}
.principle .num{
  font-family:inherit;font-size:28px;font-weight:700;letter-spacing:-.02em;
  color:rgba(250,250,247,.18);line-height:1;
  transition:color .3s var(--ease);
}
.principle:hover .num{color:var(--accent)}
.principle .ttl{
  font-size:19px;font-weight:600;color:#fafaf7;letter-spacing:-.015em;
  line-height:1.25;
}
.principle .ttl em{font-style:normal;color:var(--accent)}
.principle .sub{
  display:block;margin-top:4px;
  font-size:13.5px;font-weight:400;color:rgba(250,250,247,.55);letter-spacing:0;
}
.principle .arrow{
  color:rgba(250,250,247,.35);font-size:22px;line-height:1;
  transition:color .3s var(--ease),transform .35s var(--ease);
}
.principle:hover .arrow{color:var(--accent);transform:translateX(3px)}

/* bottom marquee */
.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(8,8,12,.7);
  padding:18px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marq-track{
  display:flex;gap:48px;white-space:nowrap;
  animation:marq 45s linear infinite;width:max-content;
}
.marq-track .pill{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;color:rgba(250,250,247,.7);
  letter-spacing:-.005em;
}
.marq-track .pill .dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  flex-shrink:0;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sticky side tab (right edge) */
.side-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;font-weight:600;font-size:13px;
  letter-spacing:.02em;
  padding:14px 18px;
  border-radius:14px 0 0 14px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transition:background .25s var(--ease),padding .25s var(--ease);
}
.side-tab:hover{background:#fb923c;padding-right:24px}
.side-tab .dot{
  writing-mode:horizontal-tb;font-size:14px;line-height:1;
}

/* scroll indicator (bottom-left) */
.scroll-cue{
  position:absolute;left:48px;bottom:36px;z-index:1;
  display:flex;align-items:center;gap:14px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,250,247,.5);
}
.scroll-cue .line{
  width:46px;height:1px;background:rgba(250,250,247,.3);position:relative;overflow:hidden;
}
.scroll-cue .line::after{
  content:"";position:absolute;left:-46px;top:0;width:46px;height:1px;background:var(--accent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%{left:-46px}50%{left:0}100%{left:46px}}

@media (max-width:1079px){
  .hero{padding:128px 0 100px}
  .hero-meta{margin-bottom:40px}
}
@media (max-width:768px){
  .hero{padding:120px 0 80px;min-height:auto}
  .hero .container{padding-left:20px;padding-right:20px}
  .hero h1{
    font-size:clamp(34px,8.4vw,60px);
    letter-spacing:-.035em;line-height:1.02;
    overflow-wrap:break-word;word-break:normal;
  }
  .hero h1 .stroke{font-size:.72em;letter-spacing:-.02em}
  .hero h1 .nowrap{white-space:normal !important}
  .hero-frame{gap:36px}

  /* CTA buttons stay side-by-side, equal width */
  .hero-actions{
    display:flex;flex-wrap:nowrap;gap:10px;width:100%;
  }
  .hero-actions .btn{
    flex:1 1 0;min-width:0;
    padding:14px 14px;font-size:14px;
    justify-content:center;
  }
  .hero-meta{gap:10px;padding-bottom:14px;margin-bottom:32px}
  .hero-meta .tag{font-size:10.5px}
  .hero-live{font-size:11.5px;padding:6px 12px}
  .hero-side{margin-top:32px}
  .principle{padding:14px 16px}
  .principle .ttl{font-size:15px}
  .principle .sub{font-size:11.5px}
  .side-tab{display:none}
  .scroll-cue{display:none}
}
@media (max-width:480px){
  .hero{padding:104px 0 72px}
  .hero h1{font-size:clamp(30px,8.8vw,44px);letter-spacing:-.03em;line-height:1.02}
  .hero h1 .stroke{font-size:.68em}
  .hero-actions .btn{padding:12px 10px;font-size:13px;gap:6px}
  .hero-marquee{padding:14px 0}
  .marq-track .pill{font-size:13px}
}

/* legacy hero device kept hidden if not used */
.hero-stage{display:none}
.hero-glow{display:none}
.device{
  position:relative;background:#fff;
  border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
  aspect-ratio: 16 / 9.4;
  transform:translateY(40px);opacity:0;
  transition:transform 1.1s var(--ease), opacity 1.1s var(--ease);
  display:none;
}
.device.in{transform:none;opacity:1}
.device::after{
  /* subtle floor reflection */
  content:"";position:absolute;left:8%;right:8%;bottom:-22px;height:60px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(11,18,32,.18), transparent 70%);
  filter:blur(6px);z-index:-1;
}
.device-bar{
  display:flex;align-items:center;gap:8px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(to bottom,#fafafa,#f4f4f3);
}
.device-bar .traffic{display:flex;gap:7px}
.device-bar .traffic i{width:11px;height:11px;border-radius:50%;display:inline-block}
.device-bar .traffic i:nth-child(1){background:#fb7185}
.device-bar .traffic i:nth-child(2){background:#fbbf24}
.device-bar .traffic i:nth-child(3){background:#34d399}
.device-bar .urlbar{
  flex:1;font-size:12px;color:var(--ink-3);font-weight:500;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;text-align:center;letter-spacing:-.005em;
}

.device-screen{
  position:relative;height:100%;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(249,115,22,.10), transparent 60%),
    linear-gradient(180deg, #fafaf7 0%, #f5f3ef 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,72px) clamp(20px,4vw,64px);
  text-align:center;gap:18px;
}
.device-tag{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
}
.device-h{
  font-size:clamp(28px,5vw,64px);letter-spacing:-.035em;line-height:1.02;
  font-weight:700;color:var(--ink);max-width:18ch;margin:0;
}
.device-h em{font-style:normal;color:var(--accent)}
.device-sub{
  font-size:clamp(13px,1.2vw,15px);color:var(--ink-2);line-height:1.5;
  max-width:46ch;margin:0;font-weight:500;
}
.device-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);
  margin-top:clamp(16px,3vw,28px);width:100%;max-width:560px;
  border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,22px);
}
.device-row div{display:flex;flex-direction:column;gap:4px}
.device-row .v{font-size:clamp(20px,2.6vw,32px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.device-row .v em{font-style:normal;color:var(--accent)}
.device-row .l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* tech strip — at the bottom of dark hero */
.tech-strip{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.10);
  padding:22px 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}
.tech-track{
  display:flex;gap:56px;white-space:nowrap;
  animation:scroll 45s linear infinite;width:max-content;
}
.tech-track span{
  font-size:15px;font-weight:500;color:rgba(250,250,247,.5);
  display:inline-flex;align-items:center;gap:10px;letter-spacing:-.005em;
}
.tech-track span i{color:rgba(250,250,247,.22);font-style:normal}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .hero-glow,.tech-track{animation:none!important}
  .device{transform:none;opacity:1;transition:none}
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;padding:15px 26px;border-radius:999px;
  transition:all .35s var(--ease);border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* hero trust strip */
.trust{
  margin-top:clamp(56px,8vw,96px);
  padding:28px 0;
  border-block:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  text-align:center;
}
@media (min-width:880px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{padding:0 16px}
.trust .v{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.trust .v .accent{color:var(--accent)}
.trust .l{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500}

/* ============ SECTION HEAD (Apple-style) ============ */
section{padding:clamp(72px,9vw,112px) 0;position:relative;background:#fff}
section.alt{background:#fbfbfd}
.sect-head{text-align:center;max-width:880px;margin:0 auto clamp(36px,4.5vw,56px)}
.sect-head .eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  color:var(--accent);text-transform:none;
}
.sect-head .eyebrow::before{display:none}
.sect-head h2{
  font-size:clamp(36px,5.4vw,72px);
  letter-spacing:-.04em;line-height:1.05;font-weight:700;
  max-width:18ch;margin:0 auto;
}
.sect-head h2 .accent{color:var(--accent)}
.sect-head h2 .muted{display:block;color:var(--ink-3);font-weight:700}
.sect-head p{
  margin:18px auto 0;max-width:56ch;
  color:var(--ink-2);font-size:clamp(16px,1.4vw,20px);line-height:1.45;font-weight:500;
}

/* ============ SERVICES (Premium tiles) ============ */
.grid-4{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:680px){.grid-4{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (min-width:1080px){.grid-4{grid-template-columns:repeat(4,1fr);gap:18px}}

.card{
  position:relative;overflow:hidden;
  min-height:320px;
  border-radius:24px;
  border:1px solid rgba(11,18,32,.06);
  padding:36px 32px 32px;
  display:flex;flex-direction:column;gap:20px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f6f7 100%);
  transition:transform .55s var(--ease),
             border-color .35s var(--ease),
             background .45s var(--ease);
}
section.alt .card{background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%)}
section:not(.alt) .card{background:linear-gradient(180deg,#fbfbfd 0%,#f1f1f3 100%)}

/* accent warm glow appears on hover */
.card::before{
  content:"";position:absolute;
  top:-50%;right:-25%;width:75%;height:90%;
  background:radial-gradient(closest-side, rgba(249,115,22,.14), transparent 70%);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}

/* big decorative watermark numeral */
.card::after{
  content:attr(data-num);
  position:absolute;right:24px;bottom:14px;
  font-size:108px;font-weight:700;
  color:rgba(11,18,32,.045);
  letter-spacing:-.06em;line-height:1;
  pointer-events:none;
  transition:color .4s var(--ease);
  font-variant-numeric:tabular-nums;
}

.card:hover{
  transform:translateY(-6px);
  border-color:rgba(11,18,32,.18);
}
.card:hover::before{opacity:1}
.card:hover::after{color:rgba(249,115,22,.10)}

.card > *{position:relative;z-index:1}

.card .icon{
  width:60px;height:60px;border-radius:16px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease), transform .55s var(--ease);
}
.card .icon svg{width:26px;height:26px}
.card:hover .icon{
  background:var(--accent);
  transform:scale(1.04) rotate(-3deg);
}

.card h3{
  font-size:22px;font-weight:700;
  letter-spacing:-.022em;line-height:1.18;
  color:var(--ink);
}
.card p{
  margin:0;font-size:15px;color:var(--ink-2);
  line-height:1.55;max-width:34ch;
}
.card .more{
  margin-top:auto;padding-top:20px;
  font-size:14.5px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .25s var(--ease);
  border-top:1px solid rgba(11,18,32,.08);
}
.card .more .chev{
  transition:transform .35s var(--ease);
  display:inline-block;font-size:16px;line-height:1;
}
.card:hover .more{color:var(--ink)}
.card:hover .more .chev{transform:translateX(4px)}

@media (prefers-reduced-motion: reduce){
  .card,.card::before,.card::after,.card .icon{transition:none!important}
  .card:hover{transform:none}
  .card:hover .icon{transform:none}
}

/* ============ PROCESS (Apple — big numbers, breathing) ============ */
.process-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:780px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.process-grid{grid-template-columns:repeat(4,1fr)}}
.step{
  background:#fff;border:none;border-radius:22px;
  padding:44px 32px 40px;text-align:left;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease);
}
section.alt .step{background:#fff}
section:not(.alt) .step{background:#fbfbfd}
.step:hover{transform:translateY(-4px)}
.step .num{
  width:auto;height:auto;border-radius:0;background:none;color:var(--accent);
  font-size:clamp(40px,4.2vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1;
  margin-bottom:8px;
}
.step:hover .num{background:none;color:var(--accent)}
.step h4{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.step p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}

/* ============ STATS (Apple — open, no frame) ============ */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:none;border-radius:0;overflow:visible;background:transparent;
  gap:48px 24px;
  max-width:1080px;margin:0 auto;
}
@media (min-width:880px){.stats{grid-template-columns:repeat(4,1fr);gap:24px}}
.stat{
  padding:0;text-align:center;border:none;background:transparent;
}
.stat:nth-child(2n){border:none}
@media (min-width:880px){.stat{border:none}.stat:nth-child(2n){border:none}.stat:last-child{border:none}}
.stat .v{
  font-size:clamp(56px,8vw,104px);font-weight:700;
  letter-spacing:-.045em;color:var(--ink);line-height:.95;
}
.stat .v .accent{color:var(--accent)}
.stat .l{
  margin-top:16px;font-size:15px;color:var(--ink-2);font-weight:500;
  letter-spacing:-.005em;
}

/* ============ FAQ (Apple — open hairlines) ============ */
.faq{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(0,0,0,.1);
}
.faq details{
  background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-radius:0;
  padding:28px 0;
  transition:none;
}
.faq details[open]{border-color:rgba(0,0,0,.1)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:clamp(18px,1.8vw,22px);font-weight:600;color:var(--ink);cursor:pointer;
  letter-spacing:-.015em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:24px;font-weight:300;color:var(--ink-3);
  transition:transform .4s var(--ease),color .3s var(--ease);
  width:28px;text-align:center;flex-shrink:0;
}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{content:"–";color:var(--accent)}
.faq .a{
  margin-top:16px;font-size:16px;color:var(--ink-2);line-height:1.65;
  max-width:76ch;font-weight:400;
}

/* ============ CONTACT (Premium Dark) ============ */
section.contact-dark{
  background:#0a0a0a;color:#fafaf7;
  padding:clamp(96px,12vw,160px) 0;
  position:relative;overflow:hidden;
  isolation:isolate;
}
section.contact-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(700px 500px at 15% 20%, rgba(249,115,22,.18), transparent 60%),
    radial-gradient(600px 450px at 85% 80%, rgba(99,102,241,.14), transparent 60%);
}

.contact-dark .sect-head{margin-bottom:clamp(56px,7vw,80px)}
.contact-dark .sect-head .eyebrow{color:var(--accent)}
.contact-dark .sect-head h2{color:#fafaf7}
.contact-dark .sect-head h2 .muted{color:rgba(250,250,247,.42)}
.contact-dark .sect-head p{color:rgba(250,250,247,.64)}

.contact-shell{
  display:grid;grid-template-columns:1fr;gap:32px;
  max-width:1180px;margin:0 auto;
}
@media (min-width:980px){
  .contact-shell{grid-template-columns:.85fr 1.15fr;gap:48px}
}

/* LEFT panel — info */
.contact-info{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(250,250,247,.10);
  border-radius:24px;
  padding:clamp(32px,4vw,48px);
  display:flex;flex-direction:column;gap:32px;
  position:relative;overflow:hidden;
}
.contact-info::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 50% at 0% 0%, rgba(249,115,22,.10), transparent 60%);
}
.contact-info > *{position:relative}
.contact-info h3{
  font-size:clamp(24px,2.4vw,32px);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;margin:0;
  color:#fafaf7;
}
.contact-info > p{
  font-size:15px;color:rgba(250,250,247,.64);
  line-height:1.6;margin:0;max-width:38ch;
}
.contact-channels{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.channel{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-top:1px solid rgba(250,250,247,.10);
}
.channel:first-child{border-top:none;padding-top:0}
.channel .ic{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(249,115,22,.14);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.channel .label{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,250,247,.42);
}
.channel a, .channel p{
  display:block;margin:2px 0 0;
  font-size:15.5px;font-weight:500;color:#fafaf7;letter-spacing:-.01em;
  transition:color .25s var(--ease);
}
.channel a:hover{color:var(--accent)}

.contact-social{
  display:flex;gap:10px;margin-top:auto;padding-top:8px;
}
.contact-social a{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(250,250,247,.10);
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(250,250,247,.72);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.contact-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.contact-availability{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:500;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.30);
  color:#bbf7d0;
  padding:8px 14px;border-radius:999px;
  align-self:flex-start;
}
.contact-availability .dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;position:relative;
}
.contact-availability .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:rgba(34,197,94,.35);animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(1.8);opacity:0}
}

/* RIGHT panel — form */
.contact-form{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(250,250,247,.10);
  border-radius:24px;
  padding:clamp(32px,4vw,48px);
  position:relative;overflow:hidden;
}
.contact-form::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 100% 0%, rgba(249,115,22,.08), transparent 60%);
}
.contact-form > *{position:relative}

.form-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:680px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid .full{grid-column:1 / -1}
}

.field{display:flex;flex-direction:column;gap:8px;position:relative}
.field label{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:rgba(250,250,247,.64);
}
.field label .req{color:var(--accent);margin-left:2px}
.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(250,250,247,.12);
  border-radius:12px;
  padding:14px 16px;
  font-size:15px;font-weight:500;
  color:#fafaf7;letter-spacing:-.005em;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  outline:none;
}
.field input::placeholder,
.field textarea::placeholder{color:rgba(250,250,247,.32)}
.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:rgba(250,250,247,.20);
  background:rgba(255,255,255,.06);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(249,115,22,.18);
}
.field textarea{resize:vertical;min-height:140px;line-height:1.55}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23fafaf7' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;cursor:pointer;
}
.field select option{background:#0a0a0a;color:#fafaf7}

.field.full{grid-column:1 / -1}

.consent{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:6px;grid-column:1 / -1;
}
.consent input[type=checkbox]{
  width:18px;height:18px;margin:1px 0 0;flex-shrink:0;
  accent-color:var(--accent);cursor:pointer;
}
.consent label{
  font-size:13px;color:rgba(250,250,247,.64);line-height:1.5;
  letter-spacing:0;font-weight:400;cursor:pointer;
}
.consent label a{color:var(--accent);transition:opacity .2s var(--ease)}
.consent label a:hover{opacity:.85}

.form-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:24px;grid-column:1 / -1;
}
.form-note{
  font-size:12.5px;color:rgba(250,250,247,.42);
  display:inline-flex;align-items:center;gap:8px;
}
.form-note svg{flex-shrink:0;opacity:.7}
.form-submit{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:14px 26px;border-radius:999px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.form-submit:hover{background:#fb923c;border-color:#fb923c;transform:translateY(-1px)}
.form-submit .arrow{transition:transform .35s var(--ease)}
.form-submit:hover .arrow{transform:translateX(4px)}

/* success state */
.form-status{
  display:none;margin-top:18px;padding:14px 16px;border-radius:12px;
  font-size:14px;font-weight:500;
}
.form-status.ok{
  display:block;background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.30);color:#bbf7d0;
}
.form-status.err{
  display:block;background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.30);color:#fecaca;
}

@media (prefers-reduced-motion: reduce){
  section.contact-dark::before,
  section.contact-dark::after,
  .contact-availability .dot::after{animation:none!important}
}

/* ============ CTA (Apple — open canvas) ============ */
.cta-box{
  background:transparent;color:var(--ink);border-radius:0;
  padding:0;text-align:center;max-width:920px;margin:0 auto;
}
.cta-box .eyebrow{
  color:var(--accent);margin-bottom:14px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
}
.cta-box .eyebrow::before{display:none}
.cta-box h2{
  color:var(--ink);font-size:clamp(40px,6vw,88px);
  letter-spacing:-.045em;line-height:1.02;font-weight:700;
  margin:0 auto;max-width:14ch;
}
.cta-box h2 .accent{color:var(--accent)}
.cta-box p{
  margin:22px auto 0;max-width:54ch;color:var(--ink-2);
  font-size:clamp(17px,1.5vw,22px);line-height:1.45;font-weight:500;
}
.cta-actions{
  display:inline-flex;flex-wrap:wrap;gap:28px 40px;
  margin-top:36px;justify-content:center;
}
.cta-actions a{
  font-size:17px;font-weight:500;color:var(--accent);
  background:none;border:none;padding:0;border-radius:0;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .25s var(--ease);
}
.cta-actions a:hover{background:none;color:var(--ink);border:none}
.cta-actions a .chev{display:inline-block;transition:transform .35s var(--ease);font-size:18px;line-height:1}
.cta-actions a:hover .chev{transform:translateX(4px)}

.contact-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-top:clamp(64px,8vw,96px);max-width:1080px;margin-left:auto;margin-right:auto;
}
@media (min-width:780px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-card{
  background:#fff;border:none;border-radius:22px;
  padding:36px 28px;text-align:center;
}
section.alt .contact-card{background:#fff}
.contact-card .eyebrow{
  justify-content:center;margin-bottom:14px;
  color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.01em;
}
.contact-card .eyebrow::before{display:none}
.contact-card h4{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:-.015em}
.contact-card a,.contact-card p{color:var(--ink-2);font-size:16px;margin:0;line-height:1.5;font-weight:500}
.contact-card a:hover{color:var(--accent)}

/* ============ FOOTER (Apple — dense, muted) ============ */
footer{
  border-top:1px solid rgba(0,0,0,.1);
  padding:24px 0 28px;background:#fbfbfd;
}
.foot-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;
  max-width:1240px;margin:0 auto;padding:0 20px;
}
.foot-col.foot-brand{grid-column:1 / -1}
.foot-col:nth-child(4){grid-column:1 / -1}
@media (min-width:880px){
  .foot-grid{grid-template-columns:1.6fr repeat(3,1fr);gap:56px;padding:18px 32px 8px}
  .foot-col.foot-brand,
  .foot-col:nth-child(4){grid-column:auto}
}
.foot-col h5{
  font-size:12px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);margin:0 0 12px;text-transform:none;
}
.foot-col a,.foot-col p{
  display:block;font-size:12px;color:var(--ink-2);
  margin:6px 0;transition:color .25s var(--ease);font-weight:400;
}
.foot-col a:hover{color:var(--accent)}
.foot-brand img{height:48px;margin-bottom:14px;display:block}
.foot-brand p{max-width:34ch;font-size:12px;color:var(--ink-2)}
.legal{
  margin-top:32px;padding:18px 32px 0;border-top:1px solid rgba(0,0,0,.1);
  max-width:1240px;margin-left:auto;margin-right:auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:var(--ink-3);font-weight:400;
}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============ EMLAK Section (premium dark feature band) ============ */
.emlak{
  position:relative;overflow:hidden;
  padding:clamp(96px,12vw,140px) 0;
  background:#0a0a0a;color:#fafaf7;
}
.emlak::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(600px 450px at 85% 75%, rgba(99,102,241,.16), transparent 65%);
}
.emlak > *{position:relative;z-index:1}
.emlak::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.5;
}
@media (max-width:768px){
  .emlak::after{display:none}
}
.emlak .container{position:relative;z-index:1;max-width:1320px}

.emlak-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.emlak-tag::before{
  content:"";display:inline-block;width:28px;height:1px;background:var(--accent);
}

.emlak-grid{
  display:grid;grid-template-columns:1fr;gap:48px;
  align-items:center;margin-bottom:64px;
}
@media (min-width:980px){
  .emlak-grid{grid-template-columns:1.15fr 1fr;gap:80px}
}

.emlak h2{
  font-family:"Unbounded","Galano Grotesque Alt","Trebuchet MS",sans-serif !important;
  font-size:clamp(32px,4.8vw,72px);
  letter-spacing:-.04em;line-height:1.02;font-weight:900;
  color:#fafaf7;margin:0;
}
.emlak h2 .accent{color:var(--accent)}
.emlak h2 .stroke{
  -webkit-text-stroke:1.5px rgba(250,250,247,.5);color:transparent;font-style:italic;
}
.emlak .lede{
  margin:28px 0 0;max-width:50ch;
  font-size:clamp(16px,1.4vw,19px);
  color:rgba(250,250,247,.7);line-height:1.55;font-weight:400;
}
.emlak-actions{display:inline-flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.emlak-actions .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.emlak-actions .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.emlak-actions .btn-primary:hover{background:#fb923c;border-color:#fb923c;transform:translateY(-2px)}
.emlak-actions .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.emlak-actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.emlak-actions .btn .arrow{transition:transform .35s var(--ease)}
.emlak-actions .btn:hover .arrow{transform:translateX(4px)}

/* right visual stack */
.emlak-stack{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.emlak-cell{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:24px 22px;
  min-height:140px;
  overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.emlak-cell:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-3px);
}
@media (hover:none){
  .emlak-cell:hover{transform:none}
}
.emlak-cell .ic{
  width:36px;height:36px;border-radius:10px;
  background:rgba(249,115,22,.16);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.emlak-cell h4{
  font-size:15px;font-weight:700;color:#fafaf7;
  margin:0 0 4px;letter-spacing:-.01em;line-height:1.25;
}
.emlak-cell p{
  font-size:12.5px;color:rgba(250,250,247,.6);
  margin:0;line-height:1.5;
}
.emlak-cell.featured{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:auto;padding:20px 24px;
}
.emlak-cell.featured .ic{margin-bottom:0;width:42px;height:42px}
.emlak-cell.featured .copy{flex:1;display:flex;flex-direction:column}
.emlak-cell.featured .copy h4{font-size:16px;margin:0}
.emlak-cell.featured .copy p{font-size:12.5px;margin-top:2px}
.emlak-cell.featured .go{
  font-size:13px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:4px;
  transition:transform .35s var(--ease);
}
.emlak-cell.featured:hover .go{transform:translateX(4px)}

/* metric row */
.emlak-metrics{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  max-width:1080px;margin:0 auto;
}
@media (min-width:780px){.emlak-metrics{grid-template-columns:repeat(4,1fr)}}
.emlak-metric{
  padding:32px 24px;text-align:center;
  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.emlak-metric:nth-child(2n){border-right:none}
@media (min-width:780px){
  .emlak-metric{border-bottom:none}
  .emlak-metric:nth-child(2n){border-right:1px solid rgba(255,255,255,.10)}
  .emlak-metric:last-child{border-right:none}
}
.emlak-metric .v{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(32px,3.6vw,48px);font-weight:900;
  color:#fafaf7;letter-spacing:-.03em;line-height:1;
}
.emlak-metric .v .accent{color:var(--accent)}
.emlak-metric .l{
  margin-top:8px;font-size:12.5px;color:rgba(250,250,247,.6);
  font-weight:500;letter-spacing:-.005em;
}

/* page-level emlak detail tweaks */
.service-hero.emlak-detail-hero,
.emlak-detail-hero{
  background:#0a0a0a !important;color:#fafaf7;
  padding:clamp(128px,14vw,168px) 0 clamp(80px,10vw,128px);
  position:relative;overflow:hidden;isolation:isolate;
}
.service-hero.emlak-detail-hero::before,
.emlak-detail-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(700px 500px at 85% 75%, rgba(99,102,241,.16), transparent 65%);
}
.service-hero.emlak-detail-hero > *{position:relative;z-index:1}
.emlak-detail-hero .breadcrumb{color:rgba(250,250,247,.5)}
.emlak-detail-hero .breadcrumb a{color:rgba(250,250,247,.72)}
.emlak-detail-hero .breadcrumb a:hover{color:var(--accent)}
.emlak-detail-hero .breadcrumb span[aria-current]{color:#fafaf7}
.emlak-detail-hero .eyebrow{color:var(--accent)}
.service-hero.emlak-detail-hero h1,
.emlak-detail-hero h1{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(40px,6.4vw,88px);
  font-weight:900;letter-spacing:-.045em;line-height:1.02;
  color:#fafaf7 !important;margin:0;max-width:18ch;
}
.service-hero.emlak-detail-hero h1 .muted,
.emlak-detail-hero h1 .muted{display:block;color:rgba(250,250,247,.4) !important;font-weight:900}
.service-hero.emlak-detail-hero .eyebrow,
.emlak-detail-hero .eyebrow{color:var(--accent) !important}
.service-hero.emlak-detail-hero .lede,
.emlak-detail-hero .lede{color:rgba(250,250,247,.7) !important;max-width:56ch}
.service-hero.emlak-detail-hero .btn-primary,
.emlak-detail-hero .btn-primary{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important}
.service-hero.emlak-detail-hero .btn-primary:hover,
.emlak-detail-hero .btn-primary:hover{background:#fb923c !important;border-color:#fb923c !important}
.service-hero.emlak-detail-hero .btn-ghost,
.emlak-detail-hero .btn-ghost{color:#fff !important;background:transparent !important;border-color:var(--accent) !important}
.service-hero.emlak-detail-hero .btn-ghost:hover,
.emlak-detail-hero .btn-ghost:hover{background:rgba(249,115,22,.12) !important;border-color:#fb923c !important;color:#fff !important}
.emlak-detail-hero .hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.emlak-detail-hero .hero-panel h2{color:var(--accent)}
.emlak-detail-hero .hero-panel li{
  color:#fafaf7;border-bottom:1px solid rgba(255,255,255,.10);
}
.emlak-detail-hero .hero-panel li:last-child{border-bottom:none}

/* ============ Mobile GPU safety (texture rasterization fix) ============ */
@media (max-width:768px){
  /* Replace all heavy radial-gradients with flat fallbacks on dark feature bands */
  .emlak::before{
    background:linear-gradient(180deg,#0c0c12 0%,#1a1410 50%,#0c0c12 100%) !important;
  }
  .emlak::after{display:none !important}
  .emlak-cell{
    background:rgba(255,255,255,.05) !important;
    transform:none !important;
  }
  .emlak-cell:hover{transform:none !important}
  .principle{
    background:rgba(255,255,255,.05) !important;
    transform:none !important;
  }
  .principle:hover{transform:none !important;background:rgba(255,255,255,.07) !important}
  .principle::before{display:none !important}

  /* Hero — flat dark, no radial mesh */
  .hero::before{
    background:linear-gradient(180deg,#0a0a10 0%,#1a0f08 50%,#0a0a10 100%) !important;
  }
  .hero::after{display:none !important}

  /* Service detail dark hero */
  .emlak-detail-hero::before{
    background:linear-gradient(180deg,#0c0c12 0%,#1a1410 50%,#0c0c12 100%) !important;
  }

  /* Service CTA dark */
  .service-cta::before{
    background:linear-gradient(180deg,#0a0a0a 0%,#1a120a 100%) !important;
  }

  /* Contact dark section */
  section.contact-dark::before{
    background:linear-gradient(180deg,#0a0a0a 0%,#1a120a 70%,#0a0a0a 100%) !important;
  }
  .contact-info,
  .contact-form{
    background:rgba(255,255,255,.04) !important;
  }
  .contact-info::before,
  .contact-form::before{display:none !important}
}

/* ============ MOBILE NUCLEAR (opaque backgrounds, kill pseudo layers) ============ */
@media (max-width:768px){
  /* Emlak section: gradient direkt section'a, pseudo'lar kapalı */
  .emlak{
    background:linear-gradient(180deg,#0c0c12 0%,#1a1410 50%,#0c0c12 100%) !important;
    overflow:visible;
  }
  .emlak::before,
  .emlak::after{display:none !important}

  /* Tüm kartları OPAK arka planla render et (alpha compositing yok) */
  .emlak-cell,
  .emlak-cell.featured{
    background:#15151b !important;
    border:1px solid #2a2a33 !important;
    overflow:visible !important;
    transform:none !important;
  }

  /* Hero: gradient direkt section'a */
  .hero{
    background:linear-gradient(180deg,#0a0a10 0%,#1a0f08 50%,#0a0a10 100%) !important;
    overflow:visible;
  }
  .hero::before,
  .hero::after{display:none !important}

  /* Hero principle kartları opak */
  .principle{
    background:#15151b !important;
    border:1px solid #2a2a33 !important;
    overflow:visible !important;
  }
  .principle::before{display:none !important}

  /* Servis CTA, contact dark — gradient direkt section'a */
  .service-cta{
    background:linear-gradient(180deg,#0a0a0a 0%,#1a120a 100%) !important;
  }
  .service-cta::before{display:none !important}

  section.contact-dark{
    background:linear-gradient(180deg,#0a0a0a 0%,#1a120a 60%,#0a0a0a 100%) !important;
  }
  section.contact-dark::before,
  section.contact-dark::after{display:none !important}

  .contact-info,
  .contact-form{
    background:#15151b !important;
    border:1px solid #2a2a33 !important;
    overflow:visible !important;
  }
  .contact-info::before,
  .contact-form::before{display:none !important}

  /* Emlak detail hero */
  .emlak-detail-hero{
    background:linear-gradient(180deg,#0c0c12 0%,#1a1410 50%,#0c0c12 100%) !important;
  }
  .emlak-detail-hero::before,
  .emlak-detail-hero::after{display:none !important}
  .emlak-detail-hero .hero-panel{
    background:#15151b !important;
    border:1px solid #2a2a33 !important;
  }

  /* Nav drawer */
  .nav-drawer{background:#0a0a0a !important}

  /* form fields opak */
  .field input,
  .field select,
  .field textarea{
    background:#1a1a20 !important;
    border:1px solid #2a2a33 !important;
  }
}

/* ============ Service detail mobile GPU safety ============ */
@media (max-width:768px){
  /* All gradient-bg cards → opaque on mobile (Mali GPU fix) */
  .card,
  .scope-item,
  .value-card,
  .related-card,
  .step,
  .contact-card,
  .hero-panel{
    background:#f5f5f7 !important;
    border:1px solid #e0e0e6 !important;
    transform:none !important;
  }
  .card::before,
  .card::after,
  .scope-item::before,
  .value-card::before{display:none !important}
  .card:hover,
  .scope-item:hover,
  .value-card:hover,
  .related-card:hover,
  .step:hover{transform:none !important}

  /* Dark hero panel (service hero with dark variant) */
  .emlak-detail-hero .hero-panel,
  .service-hero.emlak-detail-hero .hero-panel{
    background:#15151b !important;
    border:1px solid #2a2a33 !important;
  }
  .emlak-detail-hero .hero-panel h2{color:var(--accent) !important}
  .emlak-detail-hero .hero-panel li{
    color:#fafaf7 !important;
    border-bottom-color:rgba(255,255,255,.10) !important;
  }
}

/* ============ LEGAL PAGES (KVKK / Gizlilik / Çerez) ============ */
.legal-hero{
  background:#fff;padding:clamp(128px,14vw,168px) 0 clamp(48px,7vw,80px);
  position:relative;border-bottom:1px solid rgba(0,0,0,.06);
}
.legal-hero .container{max-width:920px}
.legal-hero .eyebrow{
  display:inline-block;font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:.04em;text-transform:none;margin-bottom:14px;
}
.legal-hero .eyebrow::before{display:none}
.legal-hero h1{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(36px,5.4vw,64px);
  font-weight:900;letter-spacing:-.04em;line-height:1.04;
  color:var(--ink);margin:0;max-width:18ch;
}
.legal-hero .meta{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:14px 28px;
  font-size:13.5px;color:var(--ink-2);
}
.legal-hero .meta span b{color:var(--ink);font-weight:600;margin-right:6px}

.legal-body{
  background:#fbfbfd;padding:clamp(56px,8vw,96px) 0 clamp(80px,11vw,140px);
}
.legal-body .container{max-width:920px}
.legal-toc{
  display:flex;flex-wrap:wrap;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;margin-bottom:40px;
}
.legal-toc .lab{
  width:100%;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.legal-toc a{
  font-size:13px;font-weight:500;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.legal-toc a:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.legal-section{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(32px,5vw,48px);margin-bottom:18px;
  scroll-margin-top:96px;
}
.legal-section h2{
  font-size:clamp(22px,2.4vw,30px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);margin:0 0 6px;
  display:flex;align-items:baseline;gap:14px;
}
.legal-section h2::before{
  content:attr(data-num);
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:.85em;color:var(--accent);font-weight:900;letter-spacing:-.04em;
}
.legal-section h3{
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:24px 0 8px;
}
.legal-section p,
.legal-section li{
  font-size:15px;line-height:1.7;color:var(--ink-2);
  margin:10px 0;
}
.legal-section p strong{color:var(--ink);font-weight:600}
.legal-section ul,
.legal-section ol{
  margin:14px 0 18px;padding-left:22px;
}
.legal-section li{margin:8px 0}
.legal-section li::marker{color:var(--accent)}
.legal-section a{
  color:var(--accent);border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.legal-section a:hover{border-bottom-color:var(--accent)}
.legal-section table{
  width:100%;border-collapse:collapse;margin:18px 0;
  font-size:14px;
}
.legal-section th,
.legal-section td{
  text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.legal-section th{
  background:var(--bg-soft);font-weight:600;color:var(--ink);
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;
}
.legal-section td{color:var(--ink-2)}

.legal-cta{
  background:#0a0a0a;color:#fafaf7;border-radius:22px;
  padding:clamp(32px,5vw,48px);margin-top:24px;
  display:flex;flex-direction:column;gap:14px;
}
.legal-cta h3{
  font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;
  color:#fafaf7;margin:0;
}
.legal-cta p{margin:0;color:rgba(250,250,247,.7);font-size:15px;line-height:1.55}
.legal-cta .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.legal-cta a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;
  border:1px solid;transition:all .25s var(--ease);
}
.legal-cta a.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.legal-cta a.primary:hover{background:#fb923c;border-color:#fb923c}
.legal-cta a.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.legal-cta a.ghost:hover{border-color:#fff}

@media (max-width:768px){
  .legal-section{padding:24px}
  .legal-section h2{font-size:20px;gap:10px}
  .legal-section h2::before{font-size:.75em}
  .legal-toc{padding:18px 18px}
  .legal-cta{padding:24px}
  .legal-section table{display:block;overflow-x:auto}
}

/* ============ BLOG (public) ============ */
.blog-hero{
  background:#fff;padding:clamp(128px,14vw,168px) 0 clamp(48px,7vw,80px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.blog-hero .container{max-width:1180px}
.blog-hero .eyebrow{
  display:inline-block;font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:.04em;margin-bottom:14px;
}
.blog-hero .eyebrow::before{display:none}
.blog-hero h1{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(40px,5.6vw,72px);font-weight:900;
  letter-spacing:-.045em;line-height:1.04;
  color:var(--ink);margin:0;max-width:18ch;
}
.blog-hero p.lede{
  margin:20px 0 0;max-width:60ch;
  font-size:clamp(16px,1.3vw,19px);
  color:var(--ink-2);line-height:1.55;
}

.blog-body{background:#fbfbfd;padding:clamp(56px,8vw,96px) 0 clamp(80px,11vw,140px)}
.blog-body .container{max-width:1240px}

.blog-grid{
  display:grid;grid-template-columns:1fr;gap:24px;
}
@media (min-width:680px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.blog-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  overflow:hidden;
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.blog-card:hover{border-color:var(--ink);transform:translateY(-4px)}
.blog-card .cover{
  aspect-ratio:16/10;background:var(--bg-soft) center/cover no-repeat;
  position:relative;overflow:hidden;
}
.blog-card .cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.08));
}
.blog-card .meta{display:flex;align-items:center;gap:10px;padding:20px 24px 0;font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:-.005em}
.blog-card .meta .tag{
  background:rgba(249,115,22,.10);color:var(--accent);
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
}
.blog-card h3{
  padding:14px 24px 0;font-size:19px;font-weight:700;
  letter-spacing:-.015em;line-height:1.25;color:var(--ink);
}
.blog-card p{
  padding:10px 24px 0;color:var(--ink-2);font-size:14.5px;
  line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card .more{
  margin-top:auto;padding:18px 24px 22px;
  font-size:14px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .25s var(--ease);
}
.blog-card:hover .more{color:var(--ink)}
.blog-card .more .chev{transition:transform .35s var(--ease)}
.blog-card:hover .more .chev{transform:translateX(4px)}

.blog-empty{
  text-align:center;padding:60px 24px;
  border:1px dashed var(--line);border-radius:22px;background:#fff;
  color:var(--ink-2);
}

/* Single post */
.post-hero{
  background:#fff;padding:clamp(128px,14vw,168px) 0 clamp(40px,5vw,64px);
}
.post-hero .container{max-width:880px}
.post-hero .breadcrumb{margin-bottom:24px}
.post-hero .tag{
  display:inline-block;background:rgba(249,115,22,.10);color:var(--accent);
  padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:18px;
}
.post-hero h1{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(32px,4.8vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1.08;
  color:var(--ink);margin:0;
}
.post-hero .meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px;
  font-size:13.5px;color:var(--ink-2);
}
.post-hero .meta b{color:var(--ink);font-weight:600;margin-right:6px}

.post-cover{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.post-cover img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:22px;border:1px solid var(--line);
}

.post-body{padding:clamp(48px,7vw,96px) 0 clamp(80px,11vw,140px);background:#fbfbfd}
.post-body .container{max-width:760px}
.post-content{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,5vw,56px);
}
.post-content h2{
  font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;
  margin:32px 0 12px;color:var(--ink);line-height:1.25;
}
.post-content h3{
  font-size:18px;font-weight:700;letter-spacing:-.01em;
  margin:24px 0 10px;color:var(--ink);
}
.post-content p{
  font-size:16px;line-height:1.75;color:var(--ink);margin:14px 0;
}
.post-content strong{font-weight:600}
.post-content em{font-style:italic;color:var(--ink-2)}
.post-content a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.post-content a:hover{border-bottom-color:var(--accent)}
.post-content ul,.post-content ol{padding-left:22px;margin:14px 0}
.post-content li{margin:8px 0;line-height:1.7}
.post-content li::marker{color:var(--accent)}
.post-content img{
  max-width:100%;width:100%;border-radius:14px;
  border:1px solid var(--line);margin:22px 0;display:block;
}
.post-content blockquote{
  border-left:3px solid var(--accent);
  padding:8px 0 8px 20px;margin:24px 0;
  color:var(--ink-2);font-style:italic;
  font-size:17px;line-height:1.6;
}
.post-content code{
  background:var(--bg-soft);padding:2px 6px;border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;font-size:.92em;
}
.post-content pre{
  background:#0a0a0a;color:#fafaf7;padding:20px 22px;border-radius:12px;
  overflow-x:auto;margin:22px 0;font-size:13px;line-height:1.6;
}
.post-content pre code{background:transparent;padding:0;color:inherit}
.post-content hr{
  border:none;border-top:1px solid var(--line);margin:32px 0;
}

/* Pagination + back to blog */
.post-foot{
  max-width:760px;margin:24px auto 0;padding:0 var(--pad);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.post-foot a{
  font-size:14px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
}
.post-foot a:hover{color:var(--ink)}

/* ============ ADMIN PANEL ============ */
body.admin{background:var(--bg-soft);font-family:"Galano Grotesque Alt",sans-serif}
.admin-shell{min-height:100vh;display:flex;flex-direction:column}
.admin-top{
  background:#0a0a0a;color:#fafaf7;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-top .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:#fafaf7}
.admin-top .brand img{height:30px}
.admin-top .brand small{color:rgba(250,250,247,.5);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
.admin-top nav{display:flex;gap:8px;align-items:center}
.admin-top nav a{
  font-size:13px;font-weight:500;color:rgba(250,250,247,.72);
  padding:8px 14px;border-radius:999px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.admin-top nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-top nav a.danger:hover{background:rgba(239,68,68,.18);color:#fecaca}

.admin-main{flex:1;padding:32px 24px;max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box}
.admin-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.admin-header h1{
  font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;
  font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.025em;
  color:var(--ink);margin:0;
}
.admin-header .actions{display:flex;gap:10px}
.admin-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:all .2s var(--ease);
  text-decoration:none;font-family:inherit;
}
.admin-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.admin-btn.primary:hover{background:#fb923c;border-color:#fb923c}
.admin-btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.admin-btn.ghost:hover{border-color:var(--ink)}
.admin-btn.danger{background:transparent;color:#dc2626;border-color:rgba(220,38,38,.3)}
.admin-btn.danger:hover{background:#dc2626;color:#fff;border-color:#dc2626}

.admin-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px;margin-bottom:18px;
}

.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:14px;
}
.admin-table th{
  font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.admin-table td.title{font-weight:600;color:var(--ink)}
.admin-table td.muted{color:var(--ink-2);font-size:13px}
.admin-table td.actions{text-align:right;white-space:nowrap}
.admin-table td.actions a,
.admin-table td.actions button{
  font-size:13px;font-weight:500;color:var(--ink-2);
  padding:6px 10px;border-radius:8px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  text-decoration:none;margin-left:6px;
  transition:all .2s var(--ease);font-family:inherit;
}
.admin-table td.actions a:hover{border-color:var(--ink);color:var(--ink)}
.admin-table td.actions button.del:hover{border-color:#dc2626;color:#dc2626}

.admin-form{display:flex;flex-direction:column;gap:18px}
.admin-form .row{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:680px){.admin-form .row{grid-template-columns:2fr 1fr}}
.admin-field{display:flex;flex-direction:column;gap:6px}
.admin-field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.admin-field input[type=text],
.admin-field input[type=url],
.admin-field input[type=password],
.admin-field input[type=date],
.admin-field input[type=file],
.admin-field select,
.admin-field textarea{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  outline:none;
}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.admin-field textarea{min-height:280px;line-height:1.6;font-family:ui-monospace,Menlo,monospace;font-size:13.5px}
.admin-field .hint{font-size:12px;color:var(--ink-3)}

.editor-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:980px){.editor-grid{grid-template-columns:1fr 1fr}}
.editor-preview{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:24px;max-height:520px;overflow:auto;
}
.editor-preview h2{font-size:22px;margin:20px 0 8px}
.editor-preview h3{font-size:17px;margin:18px 0 6px}
.editor-preview p{font-size:15px;line-height:1.7;margin:10px 0;color:var(--ink-2)}
.editor-preview img{max-width:100%;border-radius:8px;margin:14px 0}
.editor-preview a{color:var(--accent)}
.editor-preview ul,.editor-preview ol{padding-left:20px;margin:10px 0}
.editor-preview li{margin:6px 0}

.admin-flash{
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.3);
  color:#15803d;padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px;
}
.admin-flash.err{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.3);color:#b91c1c}

/* Login */
.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;padding:24px;
}
.login-card{
  width:100%;max-width:420px;background:#fff;border-radius:22px;
  padding:36px;
}
.login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.login-card .brand img{height:36px}
.login-card h1{font-family:"Unbounded","Galano Grotesque Alt",sans-serif !important;font-size:24px;font-weight:900;margin:0 0 6px;letter-spacing:-.02em}
.login-card .sub{color:var(--ink-2);font-size:14px;margin:0 0 24px}
.login-card .admin-btn{width:100%;justify-content:center;margin-top:8px}

@media (max-width:768px){
  .admin-main{padding:24px 16px}
  .admin-table{font-size:13px}
  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2){display:none}
}