/* ============================================================
   BYTEQUBIC — ortak stil
   Tek dosya, harici bağımlılık yok (Google Fonts hariç).
   ============================================================ */

:root{
  color-scheme: dark;
  --void:#05070a; --void-2:#070b11; --panel:#0b131b; --panel-2:#0e1a24;
  --ink:#c9d7de; --ink-dim:#7f97a1; --ink-faint:#4a626d; --line:#16323c;
  --cyan:#19e6cd; --cyan-deep:#0bb6a3; --amber:#ff9e2c; --magenta:#ff2e88;
  --glow-cyan:rgba(25,230,205,.55);
  --measure:66ch;
  --shell:1180px;
  --pad:clamp(20px,5vw,48px);
  --f-disp:"Chakra Petch",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --f-jp:"Noto Sans JP",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--f-body); font-size:clamp(16px,1.05vw,18px); line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
}
img{max-width:100%; height:auto}

/* ---------- ambient katmanlar ---------- */
/* canvas yerlesik bir eleman: inset:0 tek basina 300x150'de birakir -> boyutu ac */
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.scan{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply; opacity:.5}
.vig{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,transparent 40%,rgba(3,5,8,.7) 100%)}
.wrap{position:relative; z-index:2; flex:1 0 auto; width:100%}

/* ---------- erişilebilirlik ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--panel); color:var(--cyan); padding:10px 16px; font-family:var(--f-mono);
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--cyan-deep)}
.skip:focus{left:var(--pad); top:10px}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ---------- masthead / nav ---------- */
header.mast{max-width:var(--shell); margin:0 auto; padding:20px var(--pad) 18px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-mono); font-weight:700; font-size:.82rem; letter-spacing:.32em;
  color:var(--ink); text-transform:uppercase; display:flex; align-items:center; gap:.7em;
  text-decoration:none}
.brand b{color:var(--cyan); text-shadow:0 0 12px var(--glow-cyan)}
.brand .jp{font-family:var(--f-jp); letter-spacing:.1em; color:var(--ink-dim); font-size:.9em}
.brand:hover b{text-shadow:0 0 20px var(--glow-cyan)}

nav.site{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); flex-wrap:wrap}
nav.site a{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s}
nav.site a:hover{color:var(--cyan)}
nav.site a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--cyan)}
nav.site .live{color:var(--amber); display:flex; align-items:center; gap:.5em; border:0; cursor:default}
nav.site .live:hover{color:var(--amber)}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 8px var(--amber);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- ortak tipografi parçaları ---------- */
.kicker{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:1em; margin:0 0 26px}
.kicker .jp{font-family:var(--f-jp); letter-spacing:.2em; color:var(--ink-dim)}
.kicker::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--cyan-deep),transparent)}

.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t); position:absolute; inset:0; overflow:hidden}
.glitch::before{color:var(--magenta); transform:translate(-2px,0); clip-path:inset(0 0 62% 0);
  animation:gl1 4.2s steps(2,end) infinite; mix-blend-mode:screen; opacity:.7}
.glitch::after{color:var(--cyan); transform:translate(2px,0); clip-path:inset(58% 0 0 0);
  animation:gl2 3.3s steps(2,end) infinite; mix-blend-mode:screen; opacity:.6}
@keyframes gl1{0%,92%,100%{transform:translate(0,0)}93%{transform:translate(-4px,-1px)}96%{transform:translate(3px,1px)}}
@keyframes gl2{0%,90%,100%{transform:translate(0,0)}91%{transform:translate(4px,1px)}97%{transform:translate(-3px,-1px)}}

.tags{display:flex; flex-wrap:wrap; gap:.5em; list-style:none; margin:0; padding:0}
.tags li, .tag-chip{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:2px; padding:3px 9px; background:rgba(11,19,27,.6)}

/* ============================================================
   ANA SAYFA
   ============================================================ */
.home-hero{max-width:var(--shell); margin:0 auto; padding:clamp(44px,9vw,96px) var(--pad) clamp(26px,5vw,52px)}
.home-hero h1{font-family:var(--f-disp); font-weight:700; margin:0;
  font-size:clamp(2.6rem,8.5vw,6rem); line-height:.96; letter-spacing:-.01em; color:#eafcf8;
  text-wrap:balance}
.home-hero h1 .l2{display:block; color:var(--cyan); text-shadow:0 0 34px var(--glow-cyan)}
.home-hero .dek{font-style:italic; color:var(--ink-dim); margin:28px 0 0;
  font-size:clamp(1.02rem,2.1vw,1.3rem); line-height:1.5; max-width:46ch; text-wrap:balance}
.home-hero .stat{margin-top:30px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  color:var(--ink-faint); text-transform:uppercase; display:flex; flex-wrap:wrap; gap:.6em 1.6em}
.home-hero .stat b{color:var(--ink-dim); font-weight:400}

.sect-head{max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:baseline; gap:1em; flex-wrap:wrap}
.sect-head h2{font-family:var(--f-mono); font-weight:700; font-size:.76rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--amber); margin:0}
.sect-head .jp{font-family:var(--f-jp); color:var(--ink-faint); font-size:.85rem}
.sect-head::after{content:""; height:1px; flex:1; min-width:40px;
  background:linear-gradient(90deg,var(--line),transparent)}

.feed-wrap{max-width:var(--shell); margin:0 auto; padding:22px var(--pad) clamp(40px,7vw,80px)}
.feed{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:860px){ .feed{grid-template-columns:1fr 1fr} }

.card{background:var(--void); padding:clamp(22px,3vw,34px);
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:background .2s}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--cyan); opacity:0; transition:opacity .2s}
.card:hover{background:var(--void-2)}
.card:hover::before{opacity:1}
.card:focus-within{background:var(--void-2)}
.card .num{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.24em; color:var(--amber)}
.card h3{font-family:var(--f-disp); font-weight:600; margin:0;
  font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.14; letter-spacing:.01em;
  color:#eafcf8; text-wrap:balance}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a::after{content:""; position:absolute; inset:0}   /* tüm kart tıklanabilir */
.card:hover h3{color:var(--cyan)}
.card p{margin:0; color:var(--ink-dim); font-size:.96em; line-height:1.62}
.card .meta{margin-top:auto; padding-top:6px; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:.5em 1.2em; align-items:center}
.card .jp{font-family:var(--f-jp); color:var(--cyan-deep); font-size:1.5em; line-height:1;
  text-shadow:0 0 18px rgba(11,182,163,.35)}

/* öne çıkan ilk kart tam genişlik */
@media (min-width:860px){
  .card.lead{grid-column:1 / -1; flex-direction:row; align-items:flex-start; gap:clamp(24px,4vw,52px)}
  .card.lead .side{flex:0 0 clamp(150px,18vw,230px)}
  .card.lead .body{flex:1; display:flex; flex-direction:column; gap:14px}
  .card.lead h3{font-size:clamp(1.8rem,4vw,2.9rem)}
  .card.lead p{font-size:1.04em; max-width:56ch}
  .card.lead .jp{font-size:3.4em}
}
.card.lead .side{display:flex; flex-direction:column; gap:10px}

/* ============================================================
   YAZI SAYFASI
   ============================================================ */
.post-hero{max-width:var(--shell); margin:0 auto;
  padding:clamp(40px,8vw,92px) var(--pad) clamp(26px,5vw,52px)}
h1.title{font-family:var(--f-disp); font-weight:700; margin:0;
  font-size:clamp(2.5rem,8vw,5.6rem); line-height:.96; letter-spacing:-.01em;
  color:#eafcf8; text-wrap:balance; position:relative}
h1.title .l2{display:block; color:var(--cyan); text-shadow:0 0 34px var(--glow-cyan)}
.post-hero .dek{font-style:italic; color:var(--ink-dim); margin:28px 0 0; max-width:44ch;
  font-size:clamp(1.02rem,2.1vw,1.34rem); line-height:1.5; text-wrap:balance}
.byline{margin-top:32px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--ink-faint); text-transform:uppercase; display:flex; flex-wrap:wrap; gap:.6em 1.6em}
.byline b{color:var(--ink-dim); font-weight:400}

article:not(.card){max-width:var(--measure); margin:0 auto; padding:clamp(20px,5vw,52px) var(--pad) 40px}
article:not(.card) p{margin:0 0 1.35em}
article:not(.card) a{color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--cyan-deep)}
article:not(.card) a:hover{background:rgba(25,230,205,.12)}
.lede{font-size:1.16em; color:#dce8ed}
.lede::first-letter{font-family:var(--f-disp); font-weight:700; float:left; font-size:4.1em;
  line-height:.78; padding:.04em .12em 0 0; color:var(--cyan); text-shadow:0 0 26px var(--glow-cyan)}

.sect{margin:clamp(46px,7vw,76px) 0 24px; padding-top:8px}
.sect .rule{height:1px; background:linear-gradient(90deg,var(--line),transparent); margin-bottom:20px}
.sect .tag{display:flex; align-items:baseline; gap:1em; flex-wrap:wrap}
.sect .num{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.24em; color:var(--amber)}
.sect h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.5rem,4vw,2.15rem);
  letter-spacing:.01em; margin:.15em 0 0; color:#eafcf8; text-wrap:balance; line-height:1.1}
.sect .jp{font-family:var(--f-jp); font-weight:700; color:var(--cyan-deep); font-size:1.15em;
  text-shadow:0 0 18px rgba(11,182,163,.4)}

blockquote{margin:2.4em 0; padding:22px 24px; position:relative;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-left:2px solid var(--cyan);
  box-shadow:0 0 40px -20px var(--glow-cyan)}
blockquote .prompt{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.7em; display:block}
blockquote p{font-family:var(--f-disp); font-weight:500; font-size:clamp(1.22rem,3vw,1.65rem);
  line-height:1.32; margin:0; color:var(--cyan); text-shadow:0 0 22px var(--glow-cyan); text-wrap:balance}
blockquote cite{display:block; margin-top:1em; font-family:var(--f-mono); font-style:normal;
  font-size:.72rem; letter-spacing:.16em; color:var(--ink-dim)}
blockquote cite::before{content:"— "}

.term{font-family:var(--f-mono); font-size:.9em; background:var(--void-2);
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; color:var(--amber)}

/* okuma ilerleme çubuğu */
#prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:20;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));
  box-shadow:0 0 12px var(--glow-cyan); transition:width .1s linear}

/* yazı sonu: prev/next */
/* DİKKAT: kapsayıcıya background:var(--line) + yatay padding verilirse dolgu alanı
   çizgi rengiyle boyanır (feed'de de aynı hata olmuştu). Ayırıcılar kenarlıkla çiziliyor. */
.post-nav{max-width:var(--shell); margin:clamp(30px,6vw,60px) auto 0; padding:0 var(--pad);
  display:grid; gap:0; background:transparent}
@media (min-width:720px){
  .post-nav{grid-template-columns:1fr 1fr}
  .post-nav a{border-bottom:1px solid var(--line)}
  .post-nav a.next{border-left:1px solid var(--line)}
}
.post-nav a{background:var(--void); padding:22px clamp(16px,2.4vw,26px); text-decoration:none;
  display:flex; flex-direction:column; gap:8px; transition:background .2s;
  border-top:1px solid var(--line)}
.post-nav a:last-child{border-bottom:1px solid var(--line)}
.post-nav a:hover{background:var(--void-2)}
.post-nav .dir{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber)}
.post-nav .t{font-family:var(--f-disp); font-weight:600; font-size:1.1rem; line-height:1.2;
  color:var(--ink); text-wrap:balance}
.post-nav a:hover .t{color:var(--cyan)}
.post-nav .next{text-align:right; align-items:flex-end}

/* ============================================================
   HAKKINDA / 404
   ============================================================ */
.plain{max-width:var(--measure); margin:0 auto; padding:clamp(30px,6vw,64px) var(--pad) 40px}
.plain h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.4rem,3.6vw,1.9rem);
  color:#eafcf8; margin:2.2em 0 .6em; line-height:1.15}
.plain h2:first-child{margin-top:0}
.plain p{margin:0 0 1.3em}
.plain a{color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--cyan-deep)}
.plain dl{margin:0; display:grid; gap:2px 20px; grid-template-columns:auto 1fr;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em}
.plain dt{color:var(--ink-faint); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  padding-top:.28em}
.plain dd{margin:0; color:var(--ink-dim)}

.err{max-width:var(--shell); margin:0 auto; padding:clamp(60px,14vw,150px) var(--pad);
  text-align:center}
.err .code{font-family:var(--f-disp); font-weight:700; font-size:clamp(5rem,20vw,13rem);
  line-height:.85; color:var(--cyan); text-shadow:0 0 50px var(--glow-cyan); margin:0}
.err p{color:var(--ink-dim); font-style:italic; margin:24px 0 0;
  font-size:clamp(1rem,2.4vw,1.25rem)}
.err .back{display:inline-block; margin-top:34px; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); text-decoration:none;
  border:1px solid var(--cyan-deep); padding:12px 24px; transition:background .2s}
.err .back:hover{background:rgba(25,230,205,.12)}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{flex-shrink:0; position:relative; z-index:2;
  max-width:var(--shell); margin:clamp(40px,7vw,72px) auto 0;
  padding:30px var(--pad) 64px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint)}
footer.site b{color:var(--cyan)}
footer.site .jp{font-family:var(--f-jp); letter-spacing:.14em; color:var(--ink-dim)}
footer.site a{color:var(--ink-faint); text-decoration:none}
footer.site a:hover{color:var(--cyan)}

/* ============================================================
   HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  #bg{opacity:.5}
}

/* ============================================================
   KAPILAR (ARG) — footer terminali
   ============================================================ */
footer.site .doors{
  flex-basis:100%; margin-top:18px; padding-top:16px;
  border-top:1px dashed var(--line);
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
}
.door-form{display:flex; align-items:center; gap:8px}
.door-form label{color:var(--cyan); font-family:var(--f-mono); font-size:.8rem}
.door-form input{
  background:var(--void-2); border:1px solid var(--line); border-radius:2px;
  color:var(--ink); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  padding:7px 10px; width:11em; text-transform:lowercase;
}
.door-form input::placeholder{color:var(--ink-faint); letter-spacing:.18em}
.door-form input:focus{border-color:var(--cyan-deep); outline:none;
  box-shadow:0 0 0 1px var(--cyan-deep), 0 0 18px -6px var(--glow-cyan)}
.door-form button{
  background:transparent; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-faint); font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; padding:7px 12px; cursor:pointer;
  transition:color .18s, border-color .18s;
}
.door-form button:hover{color:var(--cyan); border-color:var(--cyan-deep)}

.door-state{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.5em; color:var(--cyan-deep)}
.door-frag{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.24em; color:var(--ink-faint)}
.door-frag.solved{color:var(--amber); text-shadow:0 0 14px rgba(255,158,44,.45)}
.door-msg{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em;
  color:var(--cyan); text-transform:none}
.door-msg.bad{color:var(--magenta)}

/* gizli dispatch'lerin üst şeridi */
.unlisted{
  max-width:var(--shell); margin:0 auto; padding:14px var(--pad) 0;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:.8em; flex-wrap:wrap;
}
.unlisted .box{border:1px solid var(--amber); border-radius:2px; padding:3px 8px;
  color:var(--amber); opacity:.85}