/* ============================================================
   Odakla — Landing & Blog ortak stil sistemi (lp.css)
   Sinematik zemin + Duolingo tarzı "bas" butonları + maskot.
   Uygulamanın gerçek token'ları (odakla-cinematic.css) baz alındı.
   ============================================================ */

:root{
  --bg:#000000;
  --ink-0:#F5F4EC;
  --ink-1:#A6A69B;
  --ink-2:#7A7A70;
  --hair:rgba(255,255,255,0.08);
  --surface:rgba(255,255,255,0.035);
  --surface-2:#1D1E1E;
  --v-500:#6A5CFF;
  --v-400:#9A8CFF;
  --v-ink:#C9BBFF;
  --v-deep:#4436C4;
  --v-glow:rgba(106,92,255,0.4);
  --gold:#FFC93C;
  --gold-deep:#E8B93D;
  --cta:linear-gradient(180deg,var(--v-400),var(--v-500));
  --cta-hover:linear-gradient(180deg,#A79BFF,#7A6DFF);
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --font-display:"Baloo 2","Manrope",-apple-system,"Segoe UI",sans-serif;
  --wrap:680px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink-0); font-family:var(--font-sans);
  padding:0 0 72px; position:relative; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- Sinematik zemin ---------- */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sky .aurora{
  position:absolute; border-radius:50%; filter:blur(30px);
}
.sky .aurora-1{
  width:120vw; height:70vh; left:50%; top:-32vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(106,92,255,0.22), rgba(106,92,255,0.04) 55%, transparent 72%);
  animation:auroraDrift 26s ease-in-out infinite;
}
.sky .aurora-2{
  width:70vw; height:55vh; right:-20vw; bottom:-18vh;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,201,60,0.10), rgba(255,201,60,0.02) 50%, transparent 70%);
  animation:auroraDrift2 32s ease-in-out infinite;
}
@keyframes auroraDrift{
  0%,100%{ transform:translateX(-50%) translateY(0) scale(1); opacity:.9; }
  50%{ transform:translateX(-46%) translateY(3vh) scale(1.08); opacity:1; }
}
@keyframes auroraDrift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-6vw,-4vh) scale(1.12); }
}
/* dev fokus halkası — logodan esinli, arka planda çok yavaş döner */
.sky .ring-echo{
  position:absolute; left:50%; top:-14vh; width:min(90vw,620px); aspect-ratio:1;
  transform:translateX(-50%); border-radius:50%;
  border:1.5px solid rgba(154,140,255,0.12);
  mask:radial-gradient(circle, transparent 61%, #000 62%);
  -webkit-mask:radial-gradient(circle, transparent 61%, #000 62%);
  animation:ringSpin 90s linear infinite;
}
.sky .ring-echo::before{
  content:''; position:absolute; inset:-1.5px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 68deg, rgba(154,140,255,0.28) 90deg, transparent 92deg);
  mask:radial-gradient(circle, transparent 61%, #000 62%);
  -webkit-mask:radial-gradient(circle, transparent 61%, #000 62%);
}
@keyframes ringSpin{ to{ transform:translateX(-50%) rotate(360deg); } }
.grain{
  position:fixed; inset:0; opacity:0.05; mix-blend-mode:overlay; pointer-events:none; z-index:1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 90% 65% at 50% 0%, transparent 42%, rgba(0,0,0,0.6) 100%);
}
.star{ position:fixed; border-radius:50%; background:#CFC3FF; pointer-events:none; z-index:1;
  box-shadow:0 0 4px rgba(154,140,255,0.7);
  animation:twinkle 4.5s ease-in-out infinite, starDrift 9s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.12; transform:scale(.7);} 50%{ opacity:.85; transform:scale(1.3);} }
@keyframes starDrift{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(5px,-9px);} }

/* ---------- Kabuk ---------- */
.wrap{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:22px 18px 0; }

.topnav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:30px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-0);
  font-weight:800; font-size:17px; font-family:var(--font-display); letter-spacing:-0.2px; }
.brand img{ width:34px; height:34px; filter:drop-shadow(0 0 12px var(--v-glow)); }

.pill-link{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--hair); color:var(--ink-1);
  font-size:12.5px; font-weight:800; font-family:var(--font-display); text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,0.28); transition:transform .14s, color .2s, background .2s; }
.pill-link:hover{ background:rgba(106,92,255,0.12); color:var(--ink-0); transform:translateY(-1px); }
.pill-link:active{ transform:translateY(1px); }
.pill-link svg{ width:14px; height:14px; flex-shrink:0; }

/* ---------- Duolingo "bas" butonları ---------- */
.cta-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; text-decoration:none; font-family:var(--font-display); white-space:nowrap;
  font-size:15.5px; font-weight:800; color:#fff; padding:15px 28px; border-radius:16px;
  background:var(--cta);
  box-shadow:0 14px 32px -10px var(--v-glow), inset 0 -4px 0 rgba(0,0,0,0.26);
  transition:transform .12s ease, box-shadow .18s ease, background .2s ease;
}
.cta-btn svg{ width:17px; height:17px; }
.cta-btn::after{
  content:''; position:absolute; top:0; left:-65%; width:42%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); animation:sheen 3.6s ease-in-out 1.4s infinite;
}
@keyframes sheen{ 0%{ left:-65%; } 38%,100%{ left:135%; } }
.cta-btn:hover{ background:var(--cta-hover); box-shadow:0 18px 42px -8px rgba(106,92,255,0.8), inset 0 -4px 0 rgba(0,0,0,0.26); }
.cta-btn:active{ transform:translateY(3px); box-shadow:0 5px 14px -8px var(--v-glow), inset 0 -1px 0 rgba(0,0,0,0.2); }
.cta-btn:focus-visible{ outline:3px solid var(--v-ink); outline-offset:3px; }

.cta-btn.secondary{
  background:#232427; color:var(--v-ink);
  box-shadow:0 10px 24px -14px rgba(0,0,0,0.7), inset 0 -4px 0 rgba(0,0,0,0.45), inset 0 0 0 1px var(--hair);
}
.cta-btn.secondary::after{ display:none; }
.cta-btn.secondary:hover{ background:#2b2c30; color:#fff; }

.hero-cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- Hero ---------- */
.hero{ text-align:center; margin-bottom:10px; }
.hero-mascot-wrap{ position:relative; width:170px; margin:4px auto 16px; }
.hero-mascot-wrap::before{
  content:''; position:absolute; left:50%; top:52%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--v-glow), transparent 66%); filter:blur(8px); z-index:0;
  animation:halo 4.5s ease-in-out infinite;
}
@keyframes halo{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.12);} }
.hero-mascot{ position:relative; z-index:1; width:100%; height:auto; display:block;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,0.5));
  animation:bob 5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-10px) rotate(1deg);} }

.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:11.5px;
  font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  background:rgba(255,201,60,0.1); border:1px solid rgba(255,201,60,0.28); padding:6px 13px; border-radius:999px;
  margin-bottom:14px; }
.eyebrow svg{ width:12px; height:12px; }

h1{ font-family:var(--font-display); font-size:37px; font-weight:800; letter-spacing:-0.6px;
  line-height:1.15; margin:0 0 14px; text-wrap:balance; }
h1 .word{ display:inline-block; opacity:0; filter:blur(5px); transform:translateY(12px);
  animation:wordIn 640ms cubic-bezier(.16,1,.3,1) both; }
h1 .accent{ background:linear-gradient(120deg,#FFFFFF 20%,var(--v-ink) 70%,var(--v-400));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }
html:not(.js) h1 .word{ opacity:1; filter:none; transform:none; }

.hero-sub{ font-size:16px; color:var(--ink-1); line-height:1.7; max-width:470px; margin:0 auto 24px; }
.hero-sub strong{ color:var(--ink-0); }

/* ---------- Bölümler ---------- */
section{ padding:30px 0; border-bottom:1px solid var(--hair); position:relative; }
html.js section{ opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
html.js section.in-view{ opacity:1; transform:none; }
section:last-of-type{ border-bottom:none; }

h2{ font-family:var(--font-display); font-size:23px; font-weight:800; line-height:1.28; margin:0 0 13px;
  text-wrap:balance; }
section > p, article p{ font-size:15px; line-height:1.8; color:var(--ink-1); margin:0 0 13px; }
section > p:last-child, article p:last-child{ margin-bottom:0; }
ul{ font-size:14.5px; line-height:1.75; color:var(--ink-1); margin:8px 0 0; padding-left:0; list-style:none; }
li{ position:relative; padding-left:24px; margin-bottom:9px; }
li::before{ content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:3px;
  background:linear-gradient(135deg,var(--v-400),var(--v-500)); transform:rotate(45deg);
  box-shadow:0 0 8px var(--v-glow); }
strong{ color:var(--ink-0); }
article a, section a.inline-a{ color:var(--v-ink); text-decoration:underline; text-decoration-color:rgba(201,187,255,0.45);
  text-underline-offset:2px; }
article a:hover{ text-decoration-color:var(--v-ink); }

/* ---------- Özellik kartları ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.feature-card{ background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:18px 16px 20px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); transition:transform .16s ease, border-color .2s ease, background .2s ease; }
.feature-card:hover{ transform:translateY(-3px); border-color:rgba(154,140,255,0.4); background:rgba(106,92,255,0.07); }
.feature-icon{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; margin-bottom:11px;
  background:linear-gradient(180deg,var(--v-400),var(--v-500)); color:#fff;
  box-shadow:0 8px 18px -8px var(--v-glow), inset 0 -3px 0 rgba(0,0,0,0.22); }
.feature-icon svg{ width:20px; height:20px; }
.feature-card h3{ font-family:var(--font-display); font-size:15px; font-weight:800; margin:0 0 5px; color:var(--ink-0); }
.feature-card p{ font-size:12.5px; line-height:1.62; margin:0; color:var(--ink-1); }

.note-card{ margin-top:15px; background:rgba(106,92,255,0.1); border:1px solid rgba(106,92,255,0.3);
  border-radius:14px; padding:14px 16px; font-size:12.5px; line-height:1.6; color:var(--v-ink);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2); }

/* ---------- Uygulama mock'u (odak halkası) ---------- */
.app-mock{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; padding:18px 0 6px; }
.mock-ring{ width:172px; height:172px; flex-shrink:0; filter:drop-shadow(0 0 24px var(--v-glow)); }
.mock-ring .track{ stroke:rgba(255,255,255,0.09); }
.mock-ring .prog{ stroke:url(#mg); stroke-linecap:round; }
.mock-ring .prog{ animation:ringPulse 3s ease-in-out infinite; }
@keyframes ringPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
.mock-ring .time{ font-family:var(--font-display); font-size:21px; font-weight:800; fill:var(--ink-0); }
.mock-ring .lbl{ font-size:7.5px; font-weight:800; fill:var(--v-ink); letter-spacing:2.5px; }
.mock-ring .pip{ fill:var(--gold); }
.app-mock img{ width:104px; height:auto; animation:bob 5.5s ease-in-out infinite; }

/* ---------- SSS ---------- */
.faq-item{ border-bottom:1px solid var(--hair); padding:16px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item h3{ font-family:var(--font-display); font-size:15px; font-weight:800; margin:0 0 7px; color:var(--ink-0); }
.faq-item p{ font-size:14px; line-height:1.7; color:var(--ink-1); margin:0; }

/* ---------- Son CTA ---------- */
.final-cta{ text-align:center; }
.final-cta p{ font-family:var(--font-display); font-size:17px; color:var(--ink-0); margin:0 0 18px; font-weight:700; text-wrap:balance; }

/* ---------- Blog: makale ---------- */
.post-head{ margin-bottom:16px; }
.kicker{ font-family:var(--font-display); font-size:11.5px; font-weight:800; letter-spacing:2.5px;
  color:var(--v-ink); text-transform:uppercase; }
.post-lede{ font-size:16.5px; line-height:1.7; color:var(--ink-1); margin:10px 0 12px; }
.post-meta{ font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--hair); padding-top:12px; font-family:var(--font-display); font-weight:600; }
article{ margin-top:8px; }
html.js article section{ opacity:0; transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1); }
html.js article section.in-view{ opacity:1; transform:none; }

.odakla-box{ background:linear-gradient(180deg, rgba(106,92,255,0.14), rgba(106,92,255,0.06));
  border:1px solid rgba(106,92,255,0.32); border-radius:20px; padding:22px 20px 24px; margin:6px 0;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.28), 0 20px 50px -24px var(--v-glow); }
.odakla-box h3{ font-family:var(--font-display); font-size:17px; font-weight:800; margin:0 0 9px; color:var(--ink-0); }
.odakla-box p{ font-size:14px; line-height:1.7; color:var(--ink-1); margin:0 0 15px; }

/* ---------- Blog: hub ---------- */
.blog-hero{ text-align:center; margin-bottom:28px; }
.blog-hero .brand-mark{ width:52px; height:52px; margin:0 auto 16px; display:block; filter:drop-shadow(0 0 18px var(--v-glow));
  animation:bob 5s ease-in-out infinite; }
.blog-hero h1{ font-size:32px; margin-bottom:10px; }
.blog-hero p{ font-size:15.5px; color:var(--ink-1); line-height:1.7; max-width:440px; margin:0 auto; }

.post-list{ display:flex; flex-direction:column; gap:14px; }
.post-card{ display:block; text-decoration:none; background:var(--surface); border:1px solid var(--hair);
  border-radius:20px; padding:20px 20px 18px; box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3);
  transition:transform .16s ease, border-color .2s ease, background .2s ease; }
html.js .post-card{ opacity:0; transform:translateY(16px);
  transition:opacity .56s cubic-bezier(.22,1,.36,1), transform .56s cubic-bezier(.22,1,.36,1), border-color .2s, background .2s; }
html.js .post-card.in-view{ opacity:1; transform:none; }
.post-card:hover{ transform:translateY(-3px); border-color:rgba(154,140,255,0.45); background:rgba(106,92,255,0.08); }
.post-card .pc-kicker{ font-family:var(--font-display); font-size:10.5px; font-weight:800; letter-spacing:2px;
  color:var(--v-ink); text-transform:uppercase; }
.post-card h2{ font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--ink-0); margin:8px 0 6px; line-height:1.3; }
.post-card p{ font-size:13.5px; line-height:1.62; color:var(--ink-1); margin:0 0 11px; }
.post-card .pc-more{ font-family:var(--font-display); font-size:12.5px; font-weight:800; color:var(--v-ink);
  display:inline-flex; align-items:center; gap:5px; }
.post-card .pc-more svg{ width:13px; height:13px; }

/* ---------- Footer ---------- */
.lnd-foot, .post-foot, .blog-foot{ margin-top:36px; text-align:center; font-size:12.5px; color:var(--ink-2); }
.lnd-foot .foot-cross, .post-foot .foot-cross, .blog-foot .foot-cross{ margin-bottom:12px; }
.foot-cross a{ color:var(--ink-1); margin:0 7px; text-decoration:none; font-family:var(--font-display); font-weight:600; }
.foot-cross a:hover{ color:var(--v-ink); }
.foot-meta a{ color:var(--ink-2); margin:0 6px; text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  h1{ font-size:28px; }
  .blog-hero h1{ font-size:26px; }
  .feature-grid{ grid-template-columns:1fr; }
  .wrap{ padding-top:16px; }
  .hero-mascot-wrap{ width:148px; }
  .cta-btn{ font-size:15px; padding:14px 24px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html.js section, html.js article section, html.js .post-card{ opacity:1 !important; transform:none !important; }
}