/* =========================================================
   aslıhan aida — enchanted author site
   Style: fairycore + dark academia + luxury fantasy
   Palette: parchment / emerald / gold
   ========================================================= */

:root{
  --parchment:#F5EFE1;
  --parch2:#ECE3D0;
  --card:#FBF7EC;
  --emerald:#115E45;
  --emerald-deep:#0B3D2E;
  --emerald-light:#1A7A5E;
  --gold:#C9A24B;
  --gold-bright:#E7CC7F;
  --gold-soft:#D9BE84;
  --ink:#2B2620;
  --muted:#8A7B5E;
  --border:#E0D4B8;

  --serif-display:"Playfair Display", Georgia, serif;
  --serif-body:"Cormorant Garamond", Georgia, serif;
  --maxw:1240px;
  --shadow-soft:0 18px 50px rgba(11,61,46,.10);
  --shadow-gold:0 0 26px rgba(201,162,75,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif-body);
  color:var(--ink);
  background:var(--parchment);
  font-size:19px;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

/* soft parchment texture / vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 15% -5%, rgba(231,204,127,.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(26,122,94,.12), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(201,162,75,.10), transparent 60%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{ font-family:var(--serif-display); font-weight:600; color:var(--emerald); line-height:1.15; }
h1{ font-size:clamp(42px,6vw,84px); letter-spacing:-1px; }
h2{ font-size:clamp(30px,4vw,52px); }
h3{ font-size:26px; }
p{ margin:0 0 1em; }
.lead{ font-size:21px; color:var(--ink); }
.muted{ color:var(--muted); }
.italic{ font-style:italic; }
.center{ text-align:center; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.section{ padding:96px 0; position:relative; z-index:2; }
.section.tight{ padding:64px 0; }

/* small-caps labels */
.eyebrow{
  font-family:var(--serif-body);
  text-transform:uppercase; letter-spacing:5px; font-size:15px;
  color:var(--gold); font-weight:600;
}

/* ---------- gold shimmer text ---------- */
.shimmer{
  background:linear-gradient(100deg,var(--gold) 10%, #F6E6B4 45%, var(--gold) 70%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{ to{ background-position:-220% center; } }

/* ---------- divider with star ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0; }
.divider .line{ height:1px; width:90px; background:linear-gradient(90deg,transparent,var(--gold)); }
.divider .line.r{ background:linear-gradient(90deg,var(--gold),transparent); }
.divider .star{ color:var(--gold); font-size:16px; animation:twinkle 3.5s ease-in-out infinite; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--serif-body); font-weight:600;
  text-transform:uppercase; letter-spacing:2px; font-size:15px;
  padding:15px 34px; border-radius:8px; text-decoration:none; cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  border:1px solid transparent; position:relative; overflow:hidden;
}
.btn-gold{ background:linear-gradient(120deg,var(--gold),var(--gold-bright)); color:#3a2d09; border-color:var(--gold); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:var(--shadow-gold); }
/* shimmer sweep on hover */
.btn-gold::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-gold:hover::after{ left:140%; }
.btn-outline{ background:transparent; color:var(--emerald); border-color:var(--emerald); }
.btn-outline:hover{ background:var(--emerald); color:var(--parchment); transform:translateY(-3px); box-shadow:var(--shadow-soft); }

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:22px 0; transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.site-header.scrolled{
  background:rgba(245,239,225,.92); backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(11,61,46,.08); padding:14px 0;
  border-bottom:1px solid rgba(201,162,75,.35);
}
.nav{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family:var(--serif-display); font-weight:700; font-size:28px; color:var(--emerald); text-decoration:none; letter-spacing:.5px; }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; }
.nav-links a{
  text-decoration:none; color:var(--ink); text-transform:uppercase;
  letter-spacing:1.6px; font-size:13px; position:relative; padding:4px 0;
  transition:color .3s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold); transition:width .35s ease;
}
.nav-links a:hover{ color:var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--gold); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; color:var(--emerald); font-size:26px; }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:140px 20px 80px;
  overflow:hidden;
}
.hero .glow{ position:absolute; border-radius:50%; filter:blur(90px); z-index:0; opacity:.5; }
.hero .glow.g1{ width:520px; height:520px; left:-120px; top:120px; background:var(--gold-bright); animation:drift 16s ease-in-out infinite; }
.hero .glow.g2{ width:560px; height:560px; right:-140px; top:60px; background:var(--emerald-light); animation:drift 20s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-26px); } }

.frame{
  position:relative; z-index:3; border:2px solid var(--gold); border-radius:8px;
  padding:16px; max-width:760px; box-shadow:var(--shadow-soft);
  animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.frame .inner{ border:1px solid var(--gold); border-radius:4px; background:rgba(251,247,236,.55); padding:72px 34px; }
.frame .hero-name{ font-family:var(--serif-display); font-weight:700; color:var(--emerald); font-size:clamp(56px,9vw,108px); line-height:1; letter-spacing:-2px; }
.frame .hero-role{ text-transform:uppercase; letter-spacing:10px; font-size:clamp(14px,2vw,22px); color:var(--ink); margin-top:18px; }
/* corner ornaments on frame */
.frame .corner{ position:absolute; width:48px; height:48px; color:var(--gold); }
.frame .corner.tl{ top:-6px; left:-6px; }
.frame .corner.tr{ top:-6px; right:-6px; transform:scaleX(-1); }
.frame .corner.bl{ bottom:-6px; left:-6px; transform:scaleY(-1); }
.frame .corner.br{ bottom:-6px; right:-6px; transform:scale(-1,-1); }

.hero-tagline{ z-index:3; margin-top:42px; text-transform:uppercase; letter-spacing:8px; font-size:clamp(15px,2vw,22px); color:var(--ink); animation:rise 1.2s .2s both; }
.hero-socials{ z-index:3; display:flex; gap:20px; margin-top:24px; animation:rise 1.2s .35s both; }
.hero-socials a{ color:var(--emerald); transition:transform .3s ease, color .3s ease; }
.hero-socials a:hover{ color:var(--gold); transform:translateY(-3px); }
.hero-badge{ z-index:3; margin-top:26px; animation:rise 1.2s .5s both; }
.scroll-cue{ z-index:3; margin-top:42px; color:var(--gold); animation:floatY 2.6s ease-in-out infinite; }

@keyframes rise{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:translateY(0); } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ position:relative; padding:170px 0 30px; text-align:center; overflow:hidden; }
.page-hero .glow{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.4; z-index:0; }
.page-hero .glow.a{ width:420px; height:420px; left:-120px; top:60px; background:var(--gold-bright); }
.page-hero .glow.b{ width:460px; height:460px; right:-140px; top:30px; background:var(--emerald-light); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; } .reveal.d3{ transition-delay:.36s; }

/* ---------- book showcase ---------- */
.showcase{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.book-cover-wrap{ display:flex; justify-content:center; position:relative; }
.book-cover-wrap .halo{ position:absolute; inset:-30px; background:radial-gradient(circle,rgba(231,204,127,.5),transparent 65%); filter:blur(20px); z-index:0; animation:pulse 5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
.book-cover{ position:relative; z-index:2; border-radius:8px; box-shadow:0 30px 50px rgba(11,61,46,.32); transition:transform .5s ease, box-shadow .5s ease; }
.book-cover:hover{ transform:translateY(-8px) rotate(-1deg); box-shadow:0 40px 70px rgba(11,61,46,.4), var(--shadow-gold); }

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-soft); transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 26px 54px rgba(11,61,46,.16); border-color:var(--gold); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }

/* blog cards */
.post .thumb{ height:180px; background:linear-gradient(135deg,var(--emerald-light),var(--emerald-deep)); position:relative; }
.post .thumb .tw{ position:absolute; right:16px; bottom:12px; color:var(--gold-bright); opacity:.6; font-size:22px; }
.post .body{ padding:22px 24px 26px; }
.post h3{ margin:12px 0 6px; font-size:23px; }
.post .date{ color:var(--muted); font-size:14px; letter-spacing:1px; }

.cat-card{ padding:34px 28px; text-align:center; }
.cat-card .ico{ color:var(--gold); font-size:30px; display:block; margin-bottom:12px; }

/* ARC / newsletter form */
.formcard{ max-width:560px; margin:0 auto; text-align:left; }
.field-label{ text-transform:uppercase; letter-spacing:2px; font-size:13px; color:var(--muted); margin-bottom:6px; display:block; }
.field{
  width:100%; background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; font-family:var(--serif-body); font-size:18px; color:var(--ink);
  margin-bottom:20px; transition:border-color .3s ease, box-shadow .3s ease;
}
.field:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
textarea.field{ min-height:140px; resize:vertical; }

/* quote */
.quote{ max-width:860px; margin:0 auto; text-align:center; }
.quote p{ font-family:var(--serif-display); font-style:italic; font-size:clamp(24px,3.4vw,36px); color:var(--emerald); line-height:1.4; }

/* pill list */
.pills{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.pill{ border:1px solid var(--border); background:#fff; border-radius:30px; padding:11px 24px; color:var(--muted); transition:all .3s ease; }
.pill:hover{ border-color:var(--gold); color:var(--emerald); transform:translateY(-2px); }

/* connect buttons */
.connect{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.connect .c{ display:flex; align-items:center; gap:12px; padding:16px 28px; background:var(--card); border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--ink); transition:all .35s ease; }
.connect .c:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-soft); color:var(--emerald); }
.connect .c span{ text-transform:uppercase; letter-spacing:2px; font-size:14px; }

/* polaroid (about) */
.polaroid{ background:#fff; padding:16px 16px 0; box-shadow:0 22px 50px rgba(11,61,46,.18); transform:rotate(-3deg); transition:transform .5s ease; max-width:400px; position:relative; }
.polaroid:hover{ transform:rotate(0deg) translateY(-6px); }
.polaroid::before{ content:""; position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(2deg); width:110px; height:30px; background:rgba(201,162,75,.4); border:1px solid rgba(201,162,75,.5); }
.polaroid .ph{ width:100%; height:380px; background:linear-gradient(135deg,var(--emerald-light),var(--emerald-deep)); display:flex; align-items:center; justify-content:center; }
.polaroid .ph span{ color:var(--gold-bright); letter-spacing:2px; font-size:14px; opacity:.85; }
.polaroid .cap{ font-family:var(--serif-display); font-style:italic; text-align:center; padding:14px 0 16px; color:var(--muted); }

/* ---------- footer ---------- */
.site-footer{ background:var(--emerald-deep); color:#e7dfca; text-align:center; padding:64px 0 44px; position:relative; z-index:2; overflow:hidden; }
.site-footer .glow{ position:absolute; width:380px; height:380px; border-radius:50%; background:var(--emerald-light); filter:blur(120px); opacity:.3; left:50%; top:-120px; transform:translateX(-50%); }
.site-footer .flogo{ font-family:var(--serif-display); font-weight:700; font-size:36px; color:var(--gold-bright); }
.foot-socials{ display:flex; gap:16px; justify-content:center; margin:24px 0; }
.foot-socials a{ width:46px; height:46px; border:1px solid rgba(231,204,127,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-bright); transition:all .35s ease; }
.foot-socials a:hover{ background:var(--gold-bright); color:var(--emerald-deep); transform:translateY(-4px); box-shadow:var(--shadow-gold); }
.site-footer .cp{ color:#b6ad92; font-size:15px; margin-top:8px; }
.site-footer .cp a{ color:#d8cfb2; text-decoration:none; }
.site-footer .cp a:hover{ color:var(--gold-bright); }

/* dark emerald section variant */
.section.dark{ background:var(--emerald-deep); color:#e9e1cd; }
.section.dark h2, .section.dark h3{ color:var(--gold-bright); }
.section.dark .muted{ color:#c8bf9f; }

/* ---------- sparkle layers (filled by JS) ---------- */
.sparkle-field{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.twinkle{ position:absolute; color:var(--gold-bright); opacity:0; animation:twinkle var(--dur,4s) ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.4); } 50%{ opacity:.9; transform:scale(1); } }

/* cursor fairy-dust dot */
.cursor-dot{
  position:fixed; pointer-events:none; z-index:9999; border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle, rgba(231,204,127,.95) 0%, rgba(217,190,132,.55) 42%, rgba(217,190,132,0) 72%);
  filter:blur(.5px);
  transition:opacity .8s ease, transform .8s ease;
  will-change:transform,opacity;
}
/* occasional cursor twinkle star */
.cursor-spark{ position:fixed; pointer-events:none; z-index:9999; color:var(--gold-bright); transform:translate(-50%,-50%); transition:opacity .8s ease, transform .8s ease; will-change:transform,opacity; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:74%; max-width:330px; flex-direction:column;
    align-items:flex-start; gap:22px; background:var(--emerald-deep); padding:110px 36px;
    transform:translateX(100%); transition:transform .4s ease; z-index:60;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:#e7dfca; font-size:16px; }
  .nav-toggle{ display:block; z-index:70; position:relative; }
  .showcase{ grid-template-columns:1fr; gap:40px; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  body{ font-size:18px; }
  .wrap{ padding:0 22px; }
  .section{ padding:64px 0; }
  .grid-3{ grid-template-columns:1fr; }
  .frame .inner{ padding:48px 20px; }
}

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