/* ══════════════════════════════════════════════════════════
   okankilicer.com — core stylesheet
   palette / type / layout tokens live at the top: edit here
   ══════════════════════════════════════════════════════════ */

/* ── self-hosted fonts (no Google dependency) ──────────── */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/chakra-petch-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:        #000502;
  --bg-2:      #02100a;
  --ink:       #dff5e6;
  --muted:     #8bb69b;
  --dim:       #56805f;
  --line:      rgba(0,255,65,.13);
  --line-2:    rgba(0,255,65,.28);

  --green:     #00ff41;
  --green-dim: #00a32a;
  --green-soft:#8dffb0;

  --glow:      rgba(0,255,65,.42);

  --font:      'Chakra Petch', system-ui, -apple-system, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ticker-h:  38px;

  --red:       #b00d14;
  --red-2:     #e01019;

  --max:       1180px;
  --pad:       clamp(20px, 4.6vw, 60px);
  --ease:      cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.62;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.02em; }
p{ margin:0 0 18px; }
.mono{ font-family:var(--mono); font-weight:400; letter-spacing:.16em; text-transform:uppercase; }

::selection{ background:rgba(0,255,65,.26); color:#fff; }

/* ── katmanlar ─────────────────────────────────────────── */
#scene{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}
/* CRT tarama çizgileri — çok hafif */
.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
}

/* metin okunabilirliği için sahne ile içerik arasına karartma */
.scrim{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(96deg,
    rgba(0,5,2,.95) 0%, rgba(0,5,2,.92) 40%,
    rgba(0,5,2,.68) 66%, rgba(0,5,2,.24) 88%, rgba(0,5,2,.06) 100%);
}
@media (max-width:900px){
  .scrim{ background:linear-gradient(180deg, rgba(0,5,2,.9), rgba(0,5,2,.84) 62%, rgba(0,5,2,.58)); }
}

#fx{ position:fixed; inset:0; z-index:60; pointer-events:none; width:100%; height:100%; }

/* ── önyükleyici ───────────────────────────────────────── */
#loader{
  position:fixed; inset:0; z-index:120; background:var(--bg);
  display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ text-align:center; width:min(300px,66vw); }
.loader-glyph{
  font-family:var(--mono); font-size:44px; font-weight:500; color:var(--green);
  letter-spacing:.22em; text-shadow:0 0 26px var(--glow); margin-bottom:22px;
}
.loader-bar{ height:1px; background:var(--line); overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:0; background:var(--green); box-shadow:0 0 12px var(--glow); transition:width .3s linear; }
.loader-txt{ margin-top:16px; font-size:9px; color:var(--dim); }

/* ── üst çubuk ─────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:18px var(--pad);
  background:linear-gradient(180deg, rgba(0,5,2,.9), rgba(0,5,2,0));
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line-2); color:var(--green);
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  box-shadow:0 0 18px rgba(0,255,65,.18) inset;
}
.brand-txt{ font-size:10px; color:var(--muted); }
@media (max-width:620px){ .brand-txt{ display:none; } }

.nav-links{ display:flex; gap:26px; font-size:9.5px; }
.nav-links a{ color:var(--dim); position:relative; padding:5px 0; transition:color .3s; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--green); box-shadow:0 0 8px var(--glow); transition:right .4s var(--ease);
}
.nav-links a:hover{ color:var(--muted); }
.nav-links a.on{ color:var(--green); }
.nav-links a.on::after{ right:0; }
@media (max-width:1000px){ .nav-links{ display:none; } }

.nav-right{ display:flex; align-items:center; gap:12px; }
/* nav saati: gün · tarih · saat, saniyede bir güncellenir */
.clock{
  display:flex; align-items:center; gap:9px;
  font-size:9.5px; color:var(--dim); letter-spacing:.13em; white-space:nowrap;
  padding-right:4px;
}
.clock i{ width:1px; height:10px; background:var(--line-2); display:block; }
.clock b{ font-weight:400; color:var(--green); font-variant-numeric:tabular-nums; }
@media (max-width:1180px){ .clock .clock-date{ display:none; } .clock i:nth-of-type(2){ display:none; } }
@media (max-width:860px){ .clock .clock-day{ display:none; } .clock i{ display:none; } }
@media (max-width:520px){ .clock{ display:none; } }

.lang{
  background:none; border:1px solid var(--line); color:var(--dim);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  padding:7px 11px; cursor:pointer; transition:border-color .3s;
}
.lang:hover{ border-color:var(--line-2); }
.lang-opt.is-on{ color:var(--green); }
.lang-sep{ opacity:.4; margin:0 3px; }

.burger{
  display:none; width:38px; height:38px; background:none;
  border:1px solid var(--line); cursor:pointer; position:relative;
}
.burger i{
  position:absolute; left:11px; right:11px; height:1px; background:var(--green);
  transition:transform .35s var(--ease), opacity .25s;
}
.burger i:nth-child(1){ top:15px; }
.burger i:nth-child(2){ top:21px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
@media (max-width:1000px){ .burger{ display:block; } }

.menu{
  position:fixed; inset:0; z-index:49; background:rgba(0,5,2,.97);
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
/* hidden özniteliği display:grid tarafından ezilmesin */
.menu[hidden]{ display:none; }
.menu.open{ opacity:1; pointer-events:auto; }
.menu-links{ display:grid; gap:6px; text-align:center; }
.menu-links a{
  font-size:clamp(24px,6vw,38px); font-weight:600; letter-spacing:-.02em;
  color:var(--muted); padding:8px 0; transition:color .3s;
}
.menu-links a:hover, .menu-links a.on{ color:var(--green); }

/* ── bölüm destesi ─────────────────────────────────────── */
#deck{ position:fixed; inset:0; z-index:10; }

.sec{
  position:absolute; inset:0;
  display:flex; align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
.sec.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

.wrap{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:104px var(--pad) 84px;
  max-height:100vh; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.wrap::-webkit-scrollbar{ width:4px; }
.wrap::-webkit-scrollbar-thumb{ background:var(--line-2); }
.wrap :is(h1,h2,h3,p,li,b,span,a){ text-shadow:0 1px 12px rgba(0,5,2,.9); }

/* giriş animasyonu — her bölüm kendi ritminde açılır */
.sec .reveal{ opacity:0; transform:translateY(26px); }
.sec.is-active .reveal{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* geçiş tipine göre farklı giriş karakteri */
.sec.enter-slide  .reveal{ transform:translateX(-38px); }
.sec.enter-zoom   .reveal{ transform:scale(.94); }
.sec.enter-rise   .reveal{ transform:translateY(44px); }
.sec.enter-skew   .reveal{ transform:translateY(30px) skewY(2.4deg); }
.sec.is-active.enter-slide .reveal,
.sec.is-active.enter-zoom  .reveal,
.sec.is-active.enter-rise  .reveal,
.sec.is-active.enter-skew  .reveal{ transform:none; }

/* ── sağ nokta rayı ────────────────────────────────────── */
.dots{
  position:fixed; right:calc(var(--pad) * .55); top:50%; transform:translateY(-50%);
  z-index:45; display:grid; gap:14px;
}
.dots button{
  width:22px; height:10px; padding:0; background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.dots button i{
  display:block; width:100%; height:1px; background:var(--dim);
  transition:background .35s, box-shadow .35s, transform .35s var(--ease);
  transform-origin:right center;
}
.dots button:hover i{ background:var(--muted); }
.dots button.on i{ background:var(--green); box-shadow:0 0 10px var(--glow); transform:scaleX(1.55); }
@media (max-width:900px){ .dots{ display:none; } }

/* ── tipografi blokları ────────────────────────────────── */
.sec-num{ font-size:9px; color:var(--green-dim); margin:0 0 10px; letter-spacing:.3em; }
.sec-num::before{ content:'// '; opacity:.6; }
.sec-title{ font-size:clamp(34px,5.4vw,64px); line-height:1; margin:0 0 18px; }
.sec-title.big{ font-size:clamp(44px,9vw,104px); }
.sec-intro{ color:var(--muted); max-width:62ch; margin:0 0 clamp(26px,4vh,46px); }
.note{ font-size:9px; color:var(--dim); }

/* ── hero ──────────────────────────────────────────────── */
.sec-hero .wrap{ display:flex; flex-direction:column; justify-content:center; }
.eyebrow{ font-size:9.5px; color:var(--green); margin:0 0 20px; text-shadow:0 0 14px var(--glow); }
.hero-name{ font-size:clamp(50px,11.5vw,150px); line-height:.9; margin:0 0 26px; }
.hero-name .line{ display:block; }
.hero-name .accent{ color:var(--green); text-shadow:0 0 40px rgba(0,255,65,.28); }
.hero-sub{ color:var(--muted); max-width:60ch; font-size:clamp(15px,1.5vw,19px); margin:0 0 34px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--line-2); color:var(--muted);
  cursor:pointer; background:none; position:relative; overflow:hidden;
  transition:color .3s, border-color .3s;
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--green);
  transform:translateY(101%); transition:transform .42s var(--ease); z-index:-1;
}
.btn:hover{ color:#001a06; border-color:var(--green); }
.btn:hover::before{ transform:translateY(0); }
.btn span, .btn *{ position:relative; z-index:1; }
.btn-primary{ color:var(--green); border-color:var(--green); box-shadow:0 0 22px rgba(0,255,65,.14); }
.btn-primary:hover{ color:#001a06; }

/* ── hakkımda ──────────────────────────────────────────── */
.grid-2{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.portrait{ position:relative; margin-top:22px; max-width:340px; }
.portrait picture{ display:block; }
.portrait img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.96);
  border:1px solid var(--line-2);
  transition:filter .7s var(--ease), transform .7s var(--ease);
}
.portrait:hover img{ filter:grayscale(1) contrast(1.14) brightness(1.04); transform:translate(-4px,-4px); }

.lead{ font-size:clamp(17px,2vw,24px); line-height:1.42; color:var(--ink); margin:0 0 24px; font-weight:400; }
.col-main p{ color:var(--muted); max-width:64ch; }

.stats{
  list-style:none; margin:38px 0 0; padding:26px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px;
  border-top:1px solid var(--line);
}
.stats b{
  display:block; font-size:clamp(28px,3.6vw,42px); font-weight:600; line-height:1;
  color:var(--green); text-shadow:0 0 24px rgba(0,255,65,.22); letter-spacing:-.03em;
}
.stats span{ display:block; font-size:8.5px; color:var(--dim); margin-top:8px; }

/* ── kartlar ───────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  background:rgba(0,8,3,.72); padding:clamp(20px,2.4vw,30px);
  position:relative; transition:background .4s var(--ease);
}
.card::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); box-shadow:0 0 10px var(--glow);
}
.card:hover{ background:rgba(0,26,10,.8); }
.card:hover::after{ transform:scaleX(1); }
.card-idx{ font-size:9px; color:var(--green-dim); }
.card h3{ font-size:clamp(16px,1.5vw,20px); margin:12px 0 10px; }
.card p{ color:var(--muted); font-size:14px; margin:0 0 16px; }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.tags li{
  font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); padding:4px 8px; transition:color .35s, border-color .35s;
}
.card:hover .tags li, .case:hover .tags li{ color:var(--green); border-color:var(--line-2); }

/* ── katkılar ──────────────────────────────────────────── */
.cases{ border-top:1px solid var(--line); }
.case{
  display:grid; grid-template-columns:minmax(140px,.3fr) minmax(0,1fr);
  gap:clamp(18px,3.4vw,48px); align-items:start;
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
  transition:background .45s var(--ease);
}
.case:hover{ background:linear-gradient(90deg, rgba(0,255,65,.045), transparent 60%); }
.case-metric b{
  display:block; font-size:clamp(19px,2.1vw,26px); font-weight:600; line-height:1.15;
  letter-spacing:-.02em; color:var(--green); text-shadow:0 0 22px rgba(0,255,65,.2); word-break:break-word;
}
.case-metric span{ display:block; font-size:8.5px; color:var(--dim); margin-top:9px; }
.case-idx{ font-size:9px; color:var(--green-dim); }
.case-body h3{ font-size:clamp(17px,2vw,24px); margin:10px 0 10px; line-height:1.26; }
.case-body p{ color:var(--muted); margin:0 0 16px; max-width:62ch; }
@media (max-width:720px){ .case{ grid-template-columns:1fr; gap:12px; } }

/* ── zaman çizelgesi ───────────────────────────────────── */
.timeline{ list-style:none; margin:0; padding:0 0 0 26px; border-left:1px solid var(--line); }
.tl-item{ position:relative; padding:0 0 clamp(24px,3.4vh,38px); }
.tl-item::before{
  content:''; position:absolute; left:-30px; top:7px; width:7px; height:7px;
  background:var(--green); box-shadow:0 0 12px var(--glow);
}
.tl-year{ font-size:9.5px; color:var(--green); }
.tl-item h3{ font-size:clamp(16px,1.7vw,21px); margin:8px 0 8px; }
.tl-item p{ color:var(--muted); margin:0; max-width:62ch; font-size:14.5px; }

/* ── akış ──────────────────────────────────────────────── */
.feed-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.feed-filters{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:clamp(24px,3.4vh,40px); }
.chip{
  background:none; border:1px solid var(--line); color:var(--dim);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 13px; cursor:pointer; transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--muted); }
.chip.is-on{ color:var(--green); border-color:var(--line-2); background:rgba(0,255,65,.06); }

.feed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; }
.feed-card{
  display:flex; flex-direction:column; gap:9px; padding:18px;
  border:1px solid var(--line); background:rgba(0,8,3,.66);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .35s, background .35s;
}
.feed-card.in{ opacity:1; transform:none; }
.feed-card:hover{ border-color:var(--line-2); background:rgba(0,26,10,.75); }
.feed-meta{ display:flex; justify-content:space-between; gap:10px; font-size:8px; color:var(--dim); }
.feed-src{ color:var(--green); }
.feed-card h3{ font-size:15px; line-height:1.34; font-weight:500; }
.feed-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }
.feed-go{ font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--dim); margin-top:auto; padding-top:6px; }
.feed-card:hover .feed-go{ color:var(--green); }

.feed-skeleton{
  height:132px; border:1px solid var(--line);
  background:linear-gradient(100deg, rgba(0,255,65,.02) 30%, rgba(0,255,65,.07) 50%, rgba(0,255,65,.02) 70%);
  background-size:220% 100%; animation:sweep 1.5s linear infinite;
}
@keyframes sweep{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }

.feed-error{
  border:1px solid var(--line); padding:20px; color:var(--muted);
  grid-column:1/-1; font-size:14px;
}
.feed-error b{ color:var(--green); font-weight:500; }
.feed-cmd{
  display:block; margin:12px 0 2px; font-family:var(--mono); font-size:12px;
  color:var(--green); background:rgba(0,255,65,.06); border:1px solid var(--line);
  padding:9px 12px; letter-spacing:.02em; user-select:all;
}
.feed-retry{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green);
  border-bottom:1px solid var(--line-2); cursor:pointer; padding-bottom:2px;
}

/* ── iletişim ──────────────────────────────────────────── */
.mail{
  display:inline-flex; align-items:center; gap:16px;
  font-size:clamp(21px,4.4vw,52px); font-weight:400; color:var(--ink);
  padding-bottom:14px; border-bottom:1px solid var(--line);
  transition:color .35s, border-color .35s; word-break:break-all;
}
.mail:hover{ color:var(--green); border-color:var(--green); }
.mail svg{ flex:none; transition:transform .4s var(--ease); }
.mail:hover svg{ transform:translate(4px,-4px); }

.socials{ list-style:none; display:flex; gap:24px; margin:32px 0 0; padding:0; flex-wrap:wrap; }
.socials a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:9.5px; color:var(--dim); transition:color .3s;
}
.socials a:hover{ color:var(--green); }
.socials svg{ flex:none; }

.foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:22px;
  display:flex; justify-content:space-between; gap:16px;
  font-size:8.5px; color:var(--dim); border-top:1px solid var(--line); padding-top:16px;
}

/* ── alt haber şeridi ──────────────────────────────────── */
.ticker{
  /* z-index 70: geçiş tuvalinin (60) üstünde durur, bölüm animasyonlarından
     etkilenmez, ekranda hep sabit kalır. */
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:var(--ticker-h); display:flex; align-items:stretch;
  background:var(--red); border-top:1px solid rgba(255,255,255,.18);
  box-shadow:0 -10px 30px rgba(0,0,0,.55);
  opacity:0; transition:opacity .25s linear;
}
body.has-ticker .ticker{ opacity:1; }
.ticker[hidden]{ display:none; }

.ticker-tag{
  display:flex; align-items:center; gap:9px; flex:none;
  padding:0 16px; background:var(--red-2); color:#fff;
  font-size:9px; letter-spacing:.2em;
}
.ticker-tag i{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:blip 1.5s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.72); } }

.ticker-view{ flex:1; overflow:hidden; display:flex; align-items:center; }
.ticker-track{
  display:flex; white-space:nowrap; will-change:transform;
  animation:tick 60s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.ticker-item{
  display:inline-flex; align-items:center; gap:11px; flex:none;
  padding:0 22px; height:var(--ticker-h); color:#ffd9db; font-size:13px;
  border-right:1px solid rgba(255,255,255,.16); text-shadow:none;
  transition:background .25s, color .25s;
}
.ticker-item b{
  font-family:var(--mono); font-weight:400; font-size:8.5px;
  letter-spacing:.14em; color:#fff; opacity:.72;
}
.ticker-item:hover{ background:rgba(0,0,0,.24); color:#fff; }
@media (max-width:760px){
  :root{ --ticker-h:34px; }
  .ticker-item{ font-size:12px; padding:0 16px; }
  .ticker-tag{ padding:0 11px; font-size:8px; letter-spacing:.14em; }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
  .ticker-view{ overflow-x:auto; }
}

/* şerit varken alttaki her şey yukarı kayar */
body.has-ticker .wrap{ padding-bottom:calc(84px + var(--ticker-h)); }
body.has-ticker .hint{ bottom:calc(20px + var(--ticker-h)); }
body.has-ticker .foot{ bottom:calc(22px + var(--ticker-h)); }

/* ── klavye ipucu ──────────────────────────────────────── */
.hint{
  position:fixed; left:var(--pad); bottom:20px; z-index:45;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:9px;
  transition:opacity .5s;
}
.hint.hide{ opacity:0; }
.hint i{
  display:block; width:14px; height:14px; border:1px solid var(--line-2);
  position:relative;
}
.hint i::after{
  content:''; position:absolute; left:50%; top:50%; width:4px; height:4px;
  border-right:1px solid var(--green); border-bottom:1px solid var(--green);
  transform:translate(-50%,-70%) rotate(45deg);
  animation:nudge 1.6s var(--ease) infinite;
}
@keyframes nudge{ 0%,100%{ transform:translate(-50%,-80%) rotate(45deg); opacity:.4; } 50%{ transform:translate(-50%,-40%) rotate(45deg); opacity:1; } }
@media (max-width:900px){ .hint{ display:none; } }

body.locked{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}