/* ============================================================================
   Coffily — Modern UI layer (2026 refresh)
   Loaded LAST, on top of the original template. Premium coffee palette:
   warm cream + deep coffee-green + caramel. Glass header, gradient hero,
   glass feature cards, numbered steps, modern CTA. Pairs with AOS (scroll
   reveals) + Lenis (smooth scroll) wired in index.html.
   ========================================================================== */

:root {
  --bg:        #F7F0E5;   /* warm cream paper            */
  --bg-soft:   #FCF8F1;   /* lighter cream for cards     */
  --bg-warm:   #F0E6D6;   /* slightly deeper cream band  */
  --ink:       #241711;   /* espresso text               */
  --ink-soft:  #5C4A3D;   /* muted brown text            */
  --ink-faint: #8A7565;

  --green:      #2E4636;  /* deep coffee-green (brand)   */
  --green-2:    #3C5A45;
  --green-deep: #1E3326;

  --caramel:   #C68A4E;   /* latte caramel accent        */
  --caramel-2: #E2B377;
  --coffee:    #6F4E37;

  --card-shadow:  0 18px 50px -18px rgba(46,32,22,.28);
  --card-shadow-h:0 30px 70px -20px rgba(46,32,22,.42);
  --ring:       0 0 0 1px rgba(46,70,54,.10);

  --grad-accent: linear-gradient(135deg, var(--green-2), var(--green-deep));
  --grad-warm:   linear-gradient(135deg, var(--caramel-2), var(--caramel));
  --radius:    20px;
  --ease:      cubic-bezier(.22,.8,.28,1);
}

/* ---------- Fonts: Fraunces (display) + Inter (body) ---------- */
body,
p, li, a, span, label, input, textarea, button {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.intro-header, .home-content-left h1 {
  font-family: 'Fraunces', 'Inria Serif', Georgia, serif !important;
  letter-spacing: -.01em;
}

html { scroll-behavior: auto; } /* Lenis owns smooth scroll */

/* ---------- Heading hover: magnetic letter wave (follows the cursor) ----
   Each letter lifts by its distance to the mouse + caramel-glows when close.
   The transform/color are set inline by JS; this just keeps it buttery. */
.lift-hover { cursor: default; }
.lift-hover .word { display: inline-block; white-space: nowrap; }
.lift-hover .char {
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.85,.28,1), color .2s ease, text-shadow .2s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .lift-hover .char { transition: none; }
}
body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

::selection { background: var(--caramel); color: #1c120c; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-warm); }
::-webkit-scrollbar-thumb {
  background: var(--coffee); border-radius: 10px;
  border: 3px solid var(--bg-warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* Soft reveal for any [data-aos] before AOS boots (avoids flash) */
[data-aos]:not(.aos-animate) { will-change: transform, opacity; }

/* ============================================================
   BUTTONS
   ============================================================ */
.button,
.button.stroke,
a.button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  border-radius: 999px !important;
  text-transform: none !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .35s var(--ease), color .35s var(--ease) !important;
  position: relative;
  overflow: hidden;
}

/* Primary = caramel gradient with shine sweep */
.button.button-primary,
input[type="submit"].button-primary {
  background: var(--grad-warm) !important;
  color: #2a1709 !important;
  border: 0 !important;
  box-shadow: 0 14px 34px -10px rgba(198,138,78,.65) !important;
}
.button.button-primary::after,
.button.stroke::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease);
}
.button.button-primary:hover,
input[type="submit"].button-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px -12px rgba(198,138,78,.8) !important;
  color: #2a1709 !important;
}
.button.button-primary:hover::after,
.button.stroke:hover::after { left: 130%; }

/* Hero stroke button = glass on dark */
.home-content-left .button.stroke,
.home-content-left .button.stroke:visited {
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.home-content-left .button.stroke:hover {
  background: #fff !important;
  color: var(--green-deep) !important;
  border-color: #fff !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   HEADER — glass, sticky, shrinks on scroll
   ============================================================ */
#header {
  background: transparent !important;
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
              padding .4s var(--ease), backdrop-filter .4s var(--ease) !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
#header.scrolled {
  background: rgba(247,240,229,.82) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(46,70,54,.08), 0 12px 30px -22px rgba(46,32,22,.5) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.header-logo a {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  font-size: 2.6rem !important;
  color: #fff !important;
  letter-spacing: -.02em;
  transition: color .4s var(--ease);
}
#header.scrolled .header-logo a { color: var(--green-deep) !important; }

#header-nav-wrap .header-main-nav li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: rgba(255,255,255,.92) !important;
  position: relative;
}
#header-nav-wrap .header-main-nav li a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--caramel-2);
  transition: width .35s var(--ease);
}
#header-nav-wrap .header-main-nav li a:hover::after,
#header-nav-wrap .header-main-nav li.current a::after { width: 100%; }
#header.scrolled #header-nav-wrap .header-main-nav li a { color: var(--ink) !important; }

/* ============================================================
   HERO
   ============================================================ */
#home::before {
  /* rich espresso→green gradient tint over the photo */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 18% 20%, rgba(60,90,69,.55), transparent 60%),
    linear-gradient(135deg, rgba(30,51,38,.92) 0%, rgba(42,26,18,.82) 55%, rgba(60,72,53,.7) 100%);
}
#home .overlay { background: transparent !important; }
.home-content { position: relative; z-index: 2; }

/* floating ambient blobs */
#home .home-content::before,
#home .home-content::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(60px); z-index: -1; pointer-events: none;
  opacity: .5;
}
#home .home-content::before {
  width: 420px; height: 420px; top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(226,179,119,.55), transparent 70%);
  animation: floatBlob 12s ease-in-out infinite;
}
#home .home-content::after {
  width: 360px; height: 360px; bottom: -40px; left: -40px;
  background: radial-gradient(circle, rgba(60,90,69,.6), transparent 70%);
  animation: floatBlob 15s ease-in-out infinite reverse;
}
@keyframes floatBlob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30px,-24px) scale(1.08); }
}

.home-content-left h3 {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #1d1109 !important;
  background: var(--grad-warm);
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 22px !important;
  box-shadow: 0 10px 26px -10px rgba(198,138,78,.7);
}
.home-content-left h1 {
  font-weight: 600 !important;
  font-size: clamp(4.2rem, 6vw, 7rem) !important;
  line-height: 1.04 !important;
  color: #fff !important;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.home-content-left h1::after {
  content: ""; display: block; width: 90px; height: 5px; border-radius: 5px;
  background: var(--grad-warm); margin-top: 26px;
}

/* phone glow + gentle float */
.home-image-right img {
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.45));
  animation: phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-16px); }
}

.home-scrolldown .scroll-icon span { letter-spacing: .14em; font-weight: 500; }

/* ============================================================
   SECTION RHYTHM + HEADINGS
   ============================================================ */
#about { background: var(--bg) !important; }
#pricing { background: var(--bg-warm) !important; }

.intro-header,
h1.intro-header, h2.intro-header {
  font-weight: 600 !important;
  font-size: clamp(3.4rem, 4.6vw, 5.2rem) !important;
  color: var(--green-deep) !important;
  line-height: 1.1 !important;
}
/* kill the old centered underline pseudo from template, add a tidy one */
h1.intro-header::before, h2.intro-header::before { display: none !important; }
.about-intro .intro-header::after,
.about-how .intro-header::after,
#pricing .intro-header::after,
#download .intro-header::after {
  content: ""; display: block; width: 64px; height: 5px; border-radius: 5px;
  background: var(--grad-warm); margin: 18px 0 0;
}
#pricing .intro-header::after, #download .intro-header::after { margin-left: auto; margin-right: auto; }

.lead {
  color: var(--ink-soft) !important;
  font-size: 1.9rem !important;
  line-height: 1.7 !important;
}

/* ============================================================
   FEATURE CARDS (about)
   ============================================================ */
.about-features .feature .service-content,
.service-content {
  background: var(--bg-soft) !important;
  border: 1px solid rgba(46,70,54,.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 34px 30px !important;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease) !important;
}
.about-features .feature:hover .service-content,
.service-content:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--card-shadow-h) !important;
  border-color: rgba(198,138,78,.4) !important;
}
.about-features .feature { margin-bottom: 26px; }

/* gradient icon chip */
.about-features .feature .icon,
.about-features .bgrid .icon {
  width: 66px !important; height: 66px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 18px !important;
  background: var(--grad-accent) !important;
  box-shadow: 0 14px 30px -12px rgba(46,70,54,.7);
  margin-bottom: 8px !important;
}
.about-features .feature .icon i,
.about-features .bgrid .icon i {
  color: #fff !important;
  font-size: 2.6rem !important;
  line-height: 66px !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.service-content h3 {
  color: var(--green-deep) !important;
  font-weight: 600 !important;
  font-size: 2rem !important;
  margin-bottom: 12px !important;
}
.service-content p { color: var(--ink-soft) !important; font-size: 1.55rem !important; }

/* ============================================================
   HOW IT WORKS — numbered, connected steps
   ============================================================ */
.about-how-steps .step {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid rgba(46,70,54,.08);
  border-radius: var(--radius);
  padding: 38px 32px 32px !important;
  margin-bottom: 26px;
  box-shadow: var(--card-shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.about-how-steps .step:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-h); }
.about-how-steps .step::before {
  content: attr(data-item);
  position: absolute; top: -22px; left: 32px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 2.2rem;
  color: #fff;
  background: var(--grad-accent);
  border-radius: 14px;
  box-shadow: 0 12px 26px -10px rgba(46,70,54,.8);
}
.about-how-steps .step h3 {
  color: var(--green-deep) !important; font-weight: 600 !important;
  font-size: 2.1rem !important; margin: 10px 0 12px !important;
}
.about-how-steps .step p { color: var(--ink-soft) !important; font-size: 1.55rem !important; }

.about-bottom-image img {
  border-radius: 24px;
  filter: drop-shadow(0 40px 70px rgba(46,32,22,.25));
  margin-top: 30px;
}

/* ============================================================
   PRICING + CONTACT FORM
   ============================================================ */
#contact-form.show { background: var(--bg-soft) !important; box-shadow: var(--card-shadow) !important; }
#contact-form label { color: var(--green-deep) !important; font-weight: 600 !important; font-size: 1.4rem !important; }
.full-width {
  border-radius: 12px !important;
  border: 1.5px solid rgba(46,70,54,.16) !important;
  background: #fff !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
  font-size: 1.55rem !important;
}
.full-width:focus {
  border-color: var(--caramel) !important;
  box-shadow: 0 0 0 4px rgba(198,138,78,.18) !important;
  outline: none !important;
}

/* ============================================================
   DOWNLOAD — dark gradient band
   ============================================================ */
#download {
  position: relative;
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a1a12 100%) !important;
  overflow: hidden;
}
#download::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(226,179,119,.22), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(60,90,69,.5), transparent 60%);
  pointer-events: none;
}
#download .row { position: relative; z-index: 1; }
#download .intro-header { color: #fff !important; }
#download .lead { color: rgba(255,255,255,.8) !important; }
#download .download-badges a { transition: transform .35s var(--ease), filter .35s var(--ease); }
#download .download-badges a:hover { transform: translateY(-4px); filter: brightness(1.08); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-main { background: #1a1009 !important; }
.footer-main h4 { color: #fff !important; font-family:'Fraunces',serif !important; font-weight:600 !important; }
.footer-main p, .footer-main a { color: rgba(255,255,255,.65) !important; font-size: 1.5rem !important; }
.footer-site-links .list-links a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-site-links .list-links a:hover { color: var(--caramel-2) !important; padding-left: 6px; }
.footer-bottom .copyright span { color: var(--caramel-2) !important; }

/* back-to-top */
#go-top a {
  background: var(--grad-accent) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px -10px rgba(46,70,54,.8);
}
#go-top a:hover { background: var(--grad-warm) !important; color: #2a1709 !important; }

/* ---------- Header CTA pill ---------- */
#header-nav-wrap .header-main-nav li.nav-cta { margin-left: 10px; }
#header-nav-wrap .header-main-nav li.nav-cta a {
  background: var(--grad-warm) !important;
  color: #2a1709 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  box-shadow: 0 10px 22px -12px rgba(198,138,78,.8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
#header-nav-wrap .header-main-nav li.nav-cta a::after { display: none !important; }
#header-nav-wrap .header-main-nav li.nav-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(198,138,78,.95);
}

/* ---------- Footer brand / store / social ---------- */
.footer-brand {
  display: inline-block;
  font-family: 'Fraunces', serif !important;
  font-weight: 600; font-size: 3rem; color: #fff !important;
  letter-spacing: -.02em; margin-bottom: 16px;
}
.footer-brand span { color: var(--caramel-2); }
.footer-store { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.footer-store img {
  height: 46px; width: auto; border-radius: 9px;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.footer-store a:hover img { transform: translateY(-3px); filter: brightness(1.1); }
.footer-contact a { color: var(--caramel-2) !important; transition: color .25s var(--ease); }
.footer-contact a:hover { color: #fff !important; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82) !important;
  font-size: 1.8rem;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.footer-social a:hover {
  transform: translateY(-3px);
  background: var(--grad-warm) !important;
  color: #2a1709 !important;
}

/* ============================================================
   SUBPAGES (gizlilik, teşekkürler) — light bg, so header is
   always glass with dark text (no dark hero behind it).
   ============================================================ */
body.subpage { background: var(--bg); }
body.subpage #header {
  background: rgba(247,240,229,.9) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(46,70,54,.08), 0 12px 30px -22px rgba(46,32,22,.5) !important;
}
body.subpage .header-logo a,
body.subpage #header-nav-wrap .header-main-nav li a { color: var(--ink) !important; }
body.subpage #header-nav-wrap .header-main-nav li.nav-cta a { color: #2a1709 !important; }

/* ---- Privacy / legal content as a premium card ---- */
.privacy-content {
  background: #fff !important;
  border: 1px solid rgba(46,70,54,.08);
  border-radius: 24px;
  padding: 48px 44px !important;
  box-shadow: 0 30px 70px -30px rgba(46,32,22,.32);
  color: var(--ink-soft) !important;
  font-size: 1.55rem !important;
}
.privacy-title { color: var(--green-deep) !important; font-weight: 600 !important; }
.privacy-content h2 {
  color: var(--green-deep) !important; font-weight: 600 !important;
  border-bottom: 2px solid rgba(198,138,78,.35) !important;
}
.privacy-content h3 { color: var(--green) !important; font-weight: 600 !important; }
.privacy-content a { color: var(--caramel) !important; }
.privacy-content th { background: var(--bg-warm) !important; color: var(--green-deep) !important; }
.privacy-content tr:nth-child(even) { background: var(--bg-soft) !important; }
.privacy-content table, .privacy-content th, .privacy-content td { border-color: rgba(46,70,54,.12) !important; }
.account-deletion {
  background: var(--bg) !important;
  border: 1px solid rgba(46,70,54,.1);
  border-radius: 16px; padding: 24px 26px !important; margin-top: 18px;
}
.back-to-home {
  background: var(--grad-warm) !important;
  color: #2a1709 !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px -12px rgba(198,138,78,.7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
.back-to-home:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -12px rgba(198,138,78,.9);
  color: #2a1709 !important;
}
@media screen and (max-width: 768px) {
  .privacy-content { padding: 28px 22px !important; }
}

/* ---- Thank-you page ---- */
.thank-you-container { padding-top: 200px !important; }
.thank-you-icon {
  background: var(--grad-accent) !important;
  box-shadow: 0 20px 50px -16px rgba(46,70,54,.7) !important;
  font-size: 46px !important;
}
.thank-you-title {
  color: var(--green-deep) !important; font-weight: 600 !important;
  font-size: clamp(3.4rem,5vw,4.6rem) !important;
}
.thank-you-message { color: var(--ink-soft) !important; font-size: 1.8rem !important; }
.go-home-button {
  background: var(--grad-warm) !important;
  color: #2a1709 !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px -12px rgba(198,138,78,.7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
.go-home-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -12px rgba(198,138,78,.9);
  color: #2a1709 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 768px) {
  .home-content-left h1 { font-size: clamp(3.4rem, 11vw, 5rem) !important; }
  #header-nav-wrap {
    background: rgba(247,240,229,.96) !important;
    backdrop-filter: blur(14px);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--card-shadow);
  }
  #header-nav-wrap .header-main-nav li a { color: var(--ink) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-image-right img,
  #home .home-content::before,
  #home .home-content::after { animation: none !important; }
}