/* Randevia brand overrides for daisyUI + a few utility classes used by the
 * marketing page. Tailwind utilities are loaded separately (Play CDN in dev;
 * a real build later). DaisyUI components honor the CSS variables defined on
 * [data-theme="randevia"] below.
 *
 * Palette is the same "soft botanical" set used by the React app:
 *   ivory background, deep sage primary, dusty rose accent, deep neutral text.
 */

:root {
  --font-heading: "Instrument Serif", ui-serif, Georgia, serif;
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

[data-theme="randevia"] {
  color-scheme: light;

  /* daisyUI core tokens */
  --p: oklch(0.5 0.06 145);          /* primary  — sage */
  --pc: oklch(0.98 0.008 90);        /* primary-content — ivory */
  --s: oklch(0.935 0.014 130);       /* secondary — soft sage tint */
  --sc: oklch(0.35 0.045 145);
  --a: oklch(0.78 0.045 25);         /* accent — dusty rose */
  --ac: oklch(0.32 0.05 20);
  --n: oklch(0.22 0.012 80);         /* neutral */
  --nc: oklch(0.98 0.008 90);
  --b1: oklch(0.975 0.008 90);       /* base-100 — ivory */
  --b2: oklch(0.955 0.012 90);
  --b3: oklch(0.895 0.012 90);
  --bc: oklch(0.22 0.012 80);        /* base-content */
  --in: oklch(0.6 0.08 230);
  --su: oklch(0.62 0.12 150);
  --wa: oklch(0.78 0.13 80);
  --er: oklch(0.62 0.22 25);

  --rounded-box: 0.875rem;
  --rounded-btn: 0.625rem;
  --rounded-badge: 999px;
  --animation-btn: 0.2s;
  --btn-text-case: none;
}

/* Typography ---------------------------------------------------------- */

html,
body {
  font-family: var(--font-sans);
  background: oklch(0.975 0.008 90);
  color: oklch(0.22 0.012 80);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-heading,
h1.display,
h2.display,
h3.display {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: oklch(0.45 0.04 145);
  font-weight: 500;
}

/* Honeypot — visually hidden but stays focusable for any oddball UA */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hero + footer CTA section backgrounds.
 *
 * Radial gradients at the top corners add the botanical "glow"; the base
 * underneath is a TINTED cream (not page ivory), so the section reads as a
 * distinct color band even where the gradients fade out. Color stops are
 * fully opaque so the gradient itself doesn't look washed out. */
.bg-botanical {
  background:
    radial-gradient(
      80rem 42rem at 8% -12%,
      oklch(0.9 0.06 145),
      transparent 62%
    ),
    radial-gradient(
      60rem 32rem at 108% 6%,
      oklch(0.9 0.07 25),
      transparent 62%
    ),
    oklch(0.94 0.026 130);              /* tinted sage-cream base */
}

.bg-botanical-soft {
  background:
    radial-gradient(
      55rem 28rem at 92% -8%,
      oklch(0.9 0.07 25),
      transparent 60%
    ),
    radial-gradient(
      50rem 26rem at 0% 100%,
      oklch(0.91 0.055 145),
      transparent 60%
    ),
    oklch(0.94 0.028 25);               /* tinted rose-cream base */
}

/* Section rhythm */
.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Mock product screenshot frame — used until real shots are wired in */
.shot-frame {
  position: relative;
  border-radius: 1.1rem;
  background: oklch(1 0 0);
  box-shadow:
    0 1px 0 oklch(0.22 0.012 80 / 0.04),
    0 30px 60px -30px oklch(0.22 0.012 80 / 0.25),
    0 10px 30px -10px oklch(0.22 0.012 80 / 0.1);
  overflow: hidden;
  border: 1px solid oklch(0.9 0.01 90);
}

.shot-frame::before {
  content: "";
  display: block;
  height: 28px;
  background:
    linear-gradient(
      oklch(0.97 0.008 90),
      oklch(0.94 0.012 90)
    );
  border-bottom: 1px solid oklch(0.9 0.01 90);
}

.shot-frame img,
.shot-frame .placeholder {
  display: block;
  width: 100%;
  height: auto;
}

.shot-placeholder {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.96 0.012 130 / 1) 0 12px,
      oklch(0.94 0.018 130 / 1) 12px 24px
    );
  display: grid;
  place-items: center;
  color: oklch(0.45 0.04 145);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

/* Phone-framed mobile screenshot. The screen crops tall portrait shots to a
 * uniform height (object-position: top keeps the page header visible); the
 * fade + hint pill signal there is more below — clicking opens the lightbox
 * with the full-length image. */
.phone-frame {
  position: relative;
  width: min(100%, 21rem);
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: 2.25rem;
  background: #ffffff;
  border: 1px solid oklch(0.88 0.012 90);
  box-shadow:
    0 1px 0 oklch(0.22 0.012 80 / 0.04),
    0 30px 60px -30px oklch(0.22 0.012 80 / 0.28),
    0 10px 30px -10px oklch(0.22 0.012 80 / 0.12);
}

.phone-frame .phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  aspect-ratio: 10 / 13;
  background: #ffffff;
}

.phone-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.phone-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6.5rem;
  background: linear-gradient(to bottom, transparent, #ffffff 92%);
  pointer-events: none;
}

.phone-hint {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid oklch(0.88 0.012 90);
  box-shadow: 0 6px 16px -6px oklch(0.22 0.012 80 / 0.25);
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(0.38 0.06 145);
  pointer-events: none;
}

.phone-frame:hover .phone-hint,
.phone-frame:focus-visible .phone-hint {
  background: oklch(0.93 0.03 145);
}

/* Soft botanical glow behind a phone in the tour rows. `rose` alternates the
 * hue so facing rows don't repeat. */
.phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 1.25rem;
}

.phone-stage::before {
  content: "";
  position: absolute;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  background: radial-gradient(closest-side, oklch(0.93 0.045 145), transparent 72%);
}

.phone-stage.rose::before {
  background: radial-gradient(closest-side, oklch(0.93 0.045 25), transparent 72%);
}

.phone-stage > * {
  position: relative;
}

/* Horizontally snapping strip of phone shots ("hepsi cebinizde" gallery). */
.shots-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15rem;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 1.5rem 0.25rem 1.75rem;
  scrollbar-width: thin;
}

.shots-strip > * {
  scroll-snap-align: start;
}

/* Small confirmation badge that sits at the bottom-right of the avatar in
 * the floating "Randevu onaylandı" card. Uses explicit colors instead of
 * daisyUI's --p / --pc tokens, which don't render reliably when daisyUI is
 * loaded as prebuilt CSS (the tokens expect bare oklch components, but our
 * theme defines them as full oklch() expressions). */
.confirm-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: oklch(0.5 0.06 145);          /* sage primary */
  color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;            /* white ring to separate from avatar */
}

/* Floating "Randevu onaylandı" card overlaying the hero screenshot.
 * Uses pure white (not --b1 ivory) so it stands out against the botanical
 * wash where the card extends past the screenshot frame. */
.floating-card {
  background: #ffffff;
  border: 1px solid oklch(0.88 0.012 90);
  box-shadow:
    0 1px 0 oklch(0.22 0.012 80 / 0.06),
    0 24px 48px -20px oklch(0.22 0.012 80 / 0.28),
    0 8px 20px -8px oklch(0.22 0.012 80 / 0.14);
}

/* Feature card icon chip */
.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: oklch(0.93 0.03 145);
  color: oklch(0.38 0.06 145);
}

.feature-icon.accent {
  background: oklch(0.92 0.035 25);
  color: oklch(0.38 0.08 25);
}

/* Click-to-zoom lightbox using native <dialog>. The dialog itself scrolls,
 * so tall mobile screenshots show at full length instead of being squeezed
 * into the viewport. */
.lightbox {
  border: 0;
  padding: 1.5rem 1rem;
  background: transparent;
  max-width: 96vw;
  max-height: 94dvh;
  width: auto;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lightbox::backdrop {
  background: oklch(0.15 0.012 80 / 0.78);
  backdrop-filter: blur(6px);
}
.lightbox[open] {
  display: block;
}
.lightbox-img {
  display: block;
  margin-inline: auto;
  max-width: min(92vw, 1400px);
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 40px 80px -20px oklch(0 0 0 / 0.5);
  background: #fff;
}
.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: oklch(1 0 0 / 0.15);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms;
}
.lightbox-close:hover {
  background: oklch(1 0 0 / 0.3);
}

/* Anchor offset so sticky nav doesn't cover section headings */
:where(#ozellikler, #nasil, #tur, #neden, #fiyat, #sss, #iletisim) {
  scroll-margin-top: 5rem;
}