/* ============================================================
   Deeprion Labs, shared site layer ("Gece Hattı")
   ------------------------------------------------------------
   Loaded on every page. Night ground, Jost type, tinted panels,
   the header with its Packages menu, the footer, buttons, pills
   and links. Homepage scenes live in home.css; the subpage and
   blog components live in styles.css and blog.css.
   Single dark theme.
   ============================================================ */
/* Colors, type families and motion come from /css/tokens.css (a generated copy of
   brand/tokens/tokens.css), which every page loads right before this file. The names
   below are the site's older names, kept as aliases of the canonical tokens; new rules
   use the canonical names (--ground, --surface, --ink-1, --bordo, --ajan, --line-strong...). */
:root{color-scheme: dark;
  --navy:var(--panel-navy); --petrol:var(--panel-petrol); --maroon:var(--panel-bordo);
  --deep2:var(--well); --card:var(--surface);
  --line2:var(--line-strong); --line3:var(--line-max);
  --text:var(--ink-1); --soft:color-mix(in srgb, var(--tint-on) 80%, transparent); --muted:var(--ink-3); --faint:var(--ink-4);
  --accent:var(--bordo); --accent-ink:var(--bordo-ink);
  --agent:var(--ajan); --agent-soft:var(--ajan-soft);
  --acc-fill:color-mix(in srgb, var(--bordo) 30%, #1a1420);
  --acc-line:var(--bordo-line);
  --acc-glow:var(--bordo-glow);
  --acc-soft:var(--bordo-soft);
  --acc-text:color-mix(in srgb, var(--bordo) 88%, var(--tint-on));
  /* Jost (an open-source Futura revival) for every heading and text. --serif keeps its
     shorter stack so computed styles stay as shipped; it is Jost, not a serif. */
  --serif:Jost, "Futura PT", Futura, "Century Gothic", sans-serif;
  --sans:var(--font-sans);
  --mono:var(--font-mono);
  --wrap:1180px; --gut:24px; --indent:104px; --inset:16px;}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font:420 17px/27px var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--bordo) 28%,transparent)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--agent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--text);color:var(--ground);padding:8px 14px;border-radius:8px;font-weight:500;text-decoration:none;transition:top .15s var(--ease)}
.skip:focus{top:12px}
/* ---------- type ---------- */
h1{font:500 62px/64px var(--serif);letter-spacing:-1.4px;text-wrap:balance}
h2{font:400 42px/48px var(--serif);letter-spacing:-.8px;text-wrap:balance}
h3{text-wrap:balance}
.intro{color:var(--muted);font-size:17px;line-height:28px;max-width:600px;text-wrap:pretty}
.center{text-align:center}
.center .intro{margin-inline:auto}
/* ---------- pills (tinted per section, like the reference tags) ---------- */
.pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:6px;font:500 14px/1 var(--sans);background:color-mix(in srgb,var(--tint-on) 7%,transparent);color:#E4E4EA;white-space:nowrap}
.pill--sm{height:24px;padding:0 9px;font-size:12px}
.pill--navy{background:rgba(128,150,214,.13);color:var(--navy-ink)}
.pill--petrol{background:rgba(110,186,160,.11);color:var(--petrol-ink)}
.pill--maroon{background:rgba(226,140,182,.11);color:var(--bordo)}
.pill--lav{background:color-mix(in srgb,var(--ajan) 11%,transparent);color:#D2CEF7}
.pill--acc{background:var(--acc-soft);color:var(--acc-text)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;text-decoration:none;font:500 16px/24px var(--sans);letter-spacing:-.1px;padding:10px 18px;border:1px solid transparent;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);white-space:nowrap}
.btn--lg{font-size:20px;line-height:32px;padding:12px 24px;letter-spacing:-.2px}
.btn--sm{font-size:14px;line-height:20px;padding:8px 14px}
.btn--dark{background:color-mix(in srgb,var(--shadow) 35%,transparent);border-color:var(--line2);color:var(--text);backdrop-filter:blur(6px)}
.btn--dark:hover{background:color-mix(in srgb,var(--shadow) 50%,transparent);border-color:var(--line3)}
.btn--ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn--ghost:hover{background:var(--wash-hover)}
.btn .arr{font-size:.9em;transition:transform .15s var(--ease)}
.btn:hover .arr{transform:translateX(2px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:500;font-size:15px;border-bottom:1px solid transparent;transition:border-color .15s var(--ease),color .15s var(--ease)}
.link-arrow:hover{border-bottom-color:var(--line3)}
.link-arrow span{transition:transform .15s var(--ease)}
.link-arrow:hover span{transform:translateX(2px)}
/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ground);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.site-header.scrolled{background:color-mix(in srgb,var(--ground) 78%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.hdr{max-width:1200px;margin:0 auto;height:72px;padding-inline:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
/* Brand: the Deeprion agent (a 9 x 8 pixel head) beside "Deeprion Labs". The head is live: main.js sets data-state
   (hazir, dusun, calis, onay, bitti, gece). Eye cells carry data-e with the states in which they are holes. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);justify-self:start;border-radius:6px}
.brand .ajan{height:24px;width:auto}
.brand-wm{font:500 21px/1 var(--sans);letter-spacing:-.25px;white-space:nowrap}
.brand-labs{color:var(--muted)}
.ajan{display:block;overflow:visible}
.ajan .c{fill:var(--text)}
.ajan .sig{fill:var(--accent);transition:fill .2s var(--ease)}
.ajan[data-state="hazir"] [data-e~="h"],.ajan[data-state="bitti"] [data-e~="h"],.ajan[data-state="dusun"] [data-e~="d"],
.ajan[data-state="calis"] [data-e~="c"],.ajan[data-state="onay"] [data-e~="o"],.ajan[data-state="gece"] [data-e~="g"]{opacity:0}
.ajan.is-blink [data-e]{opacity:1}
.ajan[data-state="dusun"] .sig,.ajan[data-state="calis"] .sig,.ajan[data-state="gece"] .sig{fill:var(--agent)}
.ajan[data-state="calis"] .sig{animation:aj-blink .5s steps(1,end) infinite}
.ajan[data-state="onay"] .sig{animation:aj-blink 1.3s steps(1,end) infinite}
.ajan[data-state="gece"] .sig{animation:aj-pulse 2.6s ease-in-out infinite}
.ajan[data-state="bitti"] .sig{animation:aj-pulse .7s ease-in-out 3}
@keyframes aj-blink{50%{opacity:.15}}
@keyframes aj-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-list > li{position:relative}
.nav-list a,.nav-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;font:500 15px/20px var(--sans);color:rgba(255,255,255,.86);text-decoration:none;background:none;border:0;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav-list a:hover,.nav-btn:hover,.nav-btn[aria-expanded="true"],.nav-list a[aria-current="page"],.nav-btn.is-current{background:var(--wash-hover);color:#fff}
.chev{width:12px;height:12px;opacity:.6;transition:transform .15s var(--ease)}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 8px);left:-8px;width:300px;padding:6px;border-radius:12px;background:#17151f;border:1px solid var(--line2);box-shadow:0 24px 60px -20px color-mix(in srgb,var(--shadow) 80%,transparent)}
.menu a{display:grid;gap:2px;padding:10px 12px;border-radius:8px;white-space:normal}
.menu a b{font-weight:500;color:var(--text)}
.menu a span{font-size:13px;line-height:18px;color:var(--muted)}
.hdr-r{display:flex;align-items:center;gap:10px;justify-self:end}
.menu-btn{display:none;width:40px;height:40px;border-radius:8px;border:1px solid var(--line2);background:transparent;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--text);transition:transform .2s var(--ease)}
.menu-btn span:first-child{top:16px}
.menu-btn span:last-child{top:22px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mobile-menu{padding:8px 16px 20px;border-top:1px solid var(--line);background:var(--ground)}
/* The header is sticky, so on a phone held sideways the open menu scrolls inside itself
   and its CTA stays reachable; where the menu fits, nothing scrolls. */
.mobile-menu{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu ul{display:grid;margin-bottom:14px}
.mobile-menu li a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.mobile-menu li a[aria-current="page"]{color:var(--accent)}
.menu a[aria-current="page"] b{color:var(--accent)}
.mobile-menu .btn{width:100%}
.sec{position:relative;margin-inline:var(--inset);padding-block:128px}
.panel{border-radius:16px;border:1px solid var(--line)}
.panel + .panel,.sec + .panel,.panel + .sec{margin-top:16px}
.panel--navy{background:var(--navy)}
.panel--petrol{background:var(--petrol)}
.panel--maroon{background:var(--maroon)}
.col{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;padding-left:calc(var(--gut) + var(--indent));padding-right:var(--gut)}
.col > h2{margin-top:20px}
.col > .intro{margin-top:14px}
/* ---------- footer ---------- */
.site-footer{padding:96px 0 40px;margin-top:8px}
.foot{max-width:1180px;margin:0 auto;padding-inline:var(--gut);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start}
.foot-cta{margin-top:20px}
.foot-brand p{margin-top:16px;color:var(--muted);font-size:14px;line-height:22px;max-width:320px}
.foot-h{font:500 14px/20px var(--sans);letter-spacing:0;color:var(--text)}
.foot-col ul{display:grid;gap:10px;margin-top:16px}
.foot-col a{color:var(--muted);text-decoration:none;font-size:14px;line-height:20px;transition:color .15s var(--ease)}
.foot-col a:hover{color:var(--text)}
.foot-prod{display:grid;color:var(--muted);font-size:14px;line-height:20px}
.foot-prod small{color:var(--faint);font-size:12.5px}
.foot-bottom{max-width:1180px;margin:72px auto 0;padding:24px var(--gut) 0;display:flex;align-items:center;gap:16px;border-top:1px solid var(--line)}
.foot-mark{display:grid;place-items:center}
.foot-mark .ajan{height:16px;width:auto}
/* the 24 px and 16 px solid marks keep the boxes of the old 23 px and 14 px marks,
   so nothing below them moves: they overflow their row evenly */
.foot-brand .brand{height:23px}
.foot-mark .ajan{margin-block:-1px}
.foot-status{font:400 13px/1 var(--sans);letter-spacing:.02em;color:#a9a6c9}
.foot-copy{margin-left:auto;font-size:12px;color:var(--faint)}
@media (max-width:1180px){
  :root{--indent:88px}
}
@media (max-width:1024px){
  :root{--indent:72px}
  .nav-list a,.nav-btn{padding:8px 9px;font-size:14px}
}
/* Five menu items need about 945px beside the brand and the CTA, so the header
   switches to the menu button at 960px; everything else keeps the 860px step. */
@media (max-width:960px){
  .hdr{grid-template-columns:1fr auto}
  .nav{display:none}
  .menu-btn{display:inline-block}
}
@media (max-width:860px){
  :root{--indent:56px}
  .foot{grid-template-columns:1fr 1fr;gap:36px 24px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:720px){
  :root{--indent:0px;--gut:20px;--inset:16px}
  h1{font-size:40px;line-height:44px;letter-spacing:-.9px}
  h2{font-size:30px;line-height:36px;letter-spacing:-.5px}
  .intro{font-size:16px;line-height:26px}
  .hdr{height:60px;padding-inline:16px}
  .mobile-menu{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px)}
  .hdr-r .btn--ghost{display:none}
  .sec{padding-block:88px}
  .btn--lg{font-size:17px;line-height:26px;padding:11px 18px}
  .foot{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-wrap:wrap;margin-top:48px}
  .foot-copy{margin-left:0;width:100%}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* Primary action, Koyu bordo: the Executive card itself. The button is the card's dark maroon surface (#251723 / #3A2433) with the pill's soft pink (#E8BBD0) as its ink and edge. */
.btn--primary{background:linear-gradient(180deg,var(--bordo-fill-hi),var(--bordo-fill));border-color:var(--bordo-ring);color:var(--bordo-pale);text-shadow:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--bordo) 6%,transparent),0 12px 34px -14px rgba(120,60,95,.75),inset 0 1px 0 rgba(255,225,238,.10)}
.btn--primary:hover{background:linear-gradient(180deg,#4E3045,#382232);border-color:color-mix(in srgb,var(--bordo) 42%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--bordo) 9%,transparent),0 14px 40px -12px rgba(135,68,106,.85),inset 0 1px 0 rgba(255,225,238,.14)}