/* Luxe Cheesecake — homepage layout.
   Implements the Claude Design "Ana Sayfa" design (project 1decabd0…) on top of
   the shared design system in css/luxe.css. The design was authored desktop-only
   with inline styles; here those become classes with the phone breakpoints the
   design did not carry. Content, ids and the scripts that drive them are the
   site's own — this file only shapes them. */

/* ---- page ground: the design sits on a plain dark ground, no fixed backdrop ---- */
body::before { display: none; }

/* ---- shared section rhythm ---- */
.lx-main { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.lx-eyebrow {
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 1.2rem;
}
.lx-rule { border-top: 1px solid var(--accent-border-soft); }

/* ---- reading text: Inter; headings stay in the display face ---- */
.hero p:not(.lx-eyebrow), .about-text p, .section-subtitle, .order-steps li span, .order-custom p,
.order-option p, .contact-info p, .contact-info address, .order-custom-link { font-family: var(--font-body); }
.about-text p { font-size: 1.02rem; line-height: 1.75; }
.section-subtitle { font-size: 1rem; }
.order-custom p { font-size: 0.95rem; }

/* ---- hero ---- */
.hero {
  /* the page's generic `section` rule caps every section at the column width; the hero is full-bleed */
  max-width: none; width: 100%; margin: 0;
  /* fills the screen below the fixed header so the copy group sits in the middle of what
     the visitor sees; svh keeps phones from jumping when browser toolbars show and hide */
  position: relative; height: auto;
  min-height: calc(100vh - var(--header-offset));
  min-height: calc(100svh - var(--header-offset));
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0; border-bottom: 1px solid var(--accent-border-soft); overflow: hidden;
  background: var(--photo-ground);
}
.hero__media {
  position: absolute; inset: 0;
  background-image: url("../images/hero-flatlay-2026.jpg");
  background-size: cover; background-position: center;
}
.hero__shade { position: absolute; inset: 0; pointer-events: none; }
.hero__shade--radial { background: radial-gradient(120% 90% at 50% 45%, rgba(8,8,10,0.28) 0%, rgba(8,8,10,0.62) 55%, rgba(8,8,10,0.95) 100%); }
.hero__shade--linear { background: linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.15) 40%, rgba(8,8,10,0.9) 100%); }
.hero-content { position: relative; z-index: 1; padding: 7rem 2rem; max-width: 820px; }
.hero .lx-eyebrow {
  /* .hero p in the page CSS outranks .lx-eyebrow, so the size is restated here; one line, always */
  font-size: 0.72rem; line-height: 1.4; white-space: nowrap;
  /* .hero p also caps width at 48ch — at this size that is ~300px, narrower than the line,
     so the text spilled out of its box to the right and looked off-centre */
  max-width: none; margin: 0 0 1.6rem;
  color: var(--text-cream); letter-spacing: 0.26em;
}
.hero h1 { font-size: 4.4rem; line-height: 1.03; color: var(--accent-light); text-wrap: balance; margin: 0 0 1.6rem; font-weight: 400; }
.hero p { font-size: 1.12rem; line-height: 1.6; color: var(--text-light); text-wrap: pretty; max-width: 48ch; margin: 0 auto 2.6rem; }
/* Two buttons, one size: an inline grid with equal 1fr columns makes both cells as wide as
   the wider label; padding and type are pinned so the primary (which the design system makes
   larger) and the outline share one height. */
.hero__actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem; justify-content: center; }
.hero__actions .pill .btn { width: 100%; padding: 0.9rem 2rem; font-size: 1.05rem; }
@media (max-width: 520px) {
  .hero__actions { grid-auto-flow: row; width: min(100%, 22rem); }
}

/* ---- delivery partners strip ---- */
.lx-strip { border-bottom: 1px solid var(--accent-border-soft); background: var(--accent-tint-soft); }
.lx-strip__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 1.4rem 2rem;
  display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
}
.lx-strip .lx-eyebrow { margin: 0; letter-spacing: 0.2em; }
.lx-strip__links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.lx-strip__link {
  font-family: var(--font-ui); font-size: 0.95rem; color: var(--text-light); text-decoration: none;
  border: 1px solid var(--accent-border-soft); border-radius: var(--radius-pill); padding: 0.5rem 1.2rem;
  transition: border-color 0.2s, color 0.2s;
}
.lx-strip__link:hover { border-color: var(--accent); color: var(--accent); }

/* ---- about ---- */
#about { padding: 5rem 0; }
.about-container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; max-width: none; margin: 0; padding: 0; }
.about-text h2 { font-size: 2.7rem; line-height: 1.1; color: var(--accent); margin: 0 0 1.4rem; text-align: left; }
.about-text p { color: var(--text-light); font-size: 1.1rem; text-wrap: pretty; margin: 0; line-height: 1.7; }
/* The photo is a tall 4:5 frame with empty ground above the cake; on wide screens it is cropped to 5:4
   with the focus pulled down and capped at 460px, so it sits level with the paragraph instead of towering over it. */
.about-image { position: relative; aspect-ratio: 5 / 4; width: 100%; max-width: 460px; justify-self: end; border: 1px solid var(--accent-border-soft); border-radius: var(--radius-card); overflow: hidden; margin: 0; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; display: block; border-radius: 0; }
/* dark inner glow, as on the brand's Claude Design campaign page: three inset shadows that
   sink the photo into its frame and hide the hard edge where the picture meets the border */
.about-image::after, .order-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.75), inset 0 0 28px 4px rgba(0, 0, 0, 0.62), inset 0 0 80px 18px rgba(0, 0, 0, 0.5);
}

/* ---- products ---- */
/* Full-bleed ground (the section sits outside the centred column), with the heading and
   the card row on the same 1200px grid as everything else. The slider from the previous
   version stays: visible cards fill the row edge to edge — 3 desktop, 2 tablet, 1 phone —
   snapping to the left edge so no half card is cut off. */
/* ground matches the contact card and the pickup/delivery tiles: gold at 8% over the page,
   instead of the old purple --secondary-bg */
#products { background: var(--accent-tint-soft); border-top: 1px solid var(--accent-border-soft); border-bottom: 1px solid var(--accent-border-soft); padding: 3rem 0 4rem; }
#products .section-container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
/* heading row: title + subtitle on the left, the menu button on the right, both on the card grid's edges */
.products-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.products-head .section-title { text-align: left; font-size: 2.5rem; margin: 0; line-height: 1.1; }
.products-head .section-subtitle { text-align: left; margin: 0.6rem 0 0; }
.products-cta { margin: 0; text-align: right; flex: 0 0 auto; padding-bottom: 0.35rem; }
.products-slider { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.products-track { gap: 1.5rem; padding: 0.75rem 0 1rem; scroll-padding-left: 0; }
.products-track .product-card { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; }
.products-track .product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* arrows straddle the row's outer edges (2rem column padding, 50px button) */
.slider-nav-btn--prev { left: calc(2rem - 25px); }
.slider-nav-btn--next { right: calc(2rem - 25px); }

/* ---- order ---- */
/* the page's .order-section rule caps the block at 680px, centres it and centres its text;
   the design spans the full column with two equal halves and left-aligned copy */
#order { max-width: none; width: auto; margin: 0; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; padding: 4rem 0; border-top: 1px solid var(--accent-border-soft); background: none; }
.order-steps li span { text-align: left; }
.order-copy .section-title { text-align: left; font-size: 2.5rem; margin: 0 0 1rem; }
.order-copy .section-subtitle { text-align: left; color: var(--text-light); max-width: 46ch; margin: 0 0 2rem; font-size: 1.05rem; }
.order-steps { display: grid; gap: 1.4rem; max-width: 470px; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.order-steps li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; align-items: start; }
.order-steps li::before { content: counter(step, decimal-leading-zero); counter-increment: step; font-size: 1.5rem; color: var(--accent); line-height: 1.2; }
.order-steps { counter-reset: step; }
.order-steps li span { color: var(--text-light); font-size: 1.05rem; }
.order-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.order-actions .lx-or { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.order-custom { margin: 0; text-align: left; }
.order-custom p { color: var(--text-muted); margin: 0 0 0.4rem; }
.order-custom-link { color: var(--accent); }
/* the right column is the photo alone; it stretches to the height of the copy beside it */
.order-visual { display: grid; align-content: stretch; }
.order-photo { position: relative; min-height: 300px; height: 100%; border: 1px solid var(--accent-border-soft); border-radius: var(--radius-card); overflow: hidden; }
.order-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
/* the pickup / delivery facts close the copy column, under the custom-order prompt */
.order-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 0; max-width: 470px; }
.order-option { background: var(--accent-tint); border: 1px solid var(--accent-border); border-radius: var(--radius-card); padding: 1.4rem; text-align: left; }
.order-option-icon { display: none; }
.order-option h4 { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem; font-weight: 600; }
.order-option p { color: var(--text-light); font-size: 1.1rem; margin: 0; }

/* ---- contact ---- */
#contact { padding: 4rem 0 5rem; border-top: 1px solid var(--accent-border-soft); background: none; }
#contact .section-container { max-width: none; padding: 0; }
.contact-card {
  background: var(--accent-tint); border: 1px solid var(--accent-border); border-radius: var(--radius-card);
  padding: 3rem; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start;
}
.contact-card .section-title { text-align: left; font-size: 2.3rem; margin: 0 0 1rem; }
.contact-card .section-subtitle { text-align: left; color: var(--text-light); max-width: 46ch; margin: 0 0 1.6rem; }
.contact-info { display: grid; gap: 1.2rem; }
.contact-info .lx-eyebrow { margin: 0 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.2em; }
.contact-info address, .contact-info p { font-style: normal; color: var(--text-light); font-size: 1.05rem; margin: 0; line-height: 1.6; }
.contact-info a { color: var(--accent); text-decoration: none; }
.contact-info h3 { display: none; }
.contact-info .contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-info .whatsapp-btn { justify-self: start; margin-top: 0.4rem; }
/* the form takes the wider column: name and email side by side, a roomy message box under them */
.contact-form { max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form textarea, .contact-form .btn { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea {
  width: 100%; min-width: 0; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(197, 157, 95, 0.35); border-radius: var(--radius-control);
  color: var(--text-light); font-family: var(--font-ui); font-size: 1.02rem; padding: 0.95rem 1.1rem; line-height: 1.4;
}
.contact-form textarea { min-height: 220px; resize: vertical; }
.contact-form .btn { justify-self: start; padding: 0.9rem 2rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(197, 157, 95, 0.2); }

/* ---- footer: same ground as the products band and the delivery strip ---- */
footer { background: var(--accent-tint-soft); border-top: 1px solid var(--accent-border-soft); }

/* ---- phones and small tablets: the design had no breakpoints, so these are the site's ---- */
@media (max-width: 900px) {
  .products-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .products-cta { text-align: left; padding-bottom: 0; }
  .products-track .product-card { flex-basis: calc((100% - 1.5rem) / 2); }
  .hero h1 { font-size: 3rem; }
  .hero-content { padding: 5rem 1.25rem; }
  .about-container, #order, .contact-card { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-image { max-width: 440px; justify-self: start; }
  .contact-card { padding: 2rem 1.5rem; }
}
/* the phone-only rows of the menu stay out of the desktop nav */
.nav-status-item, .nav-language-label { display: none; }

@media (max-width: 768px) {
  /* The header scrolls away with the page (position: relative), so a menu tap should land
     on the section's own top edge; the page's 60px scroll-margin dates from a fixed header. */
  section { scroll-margin-top: 0; }
  .hero__media { background-image: url("../images/hero-flatlay-2026-mobile.jpg"); }

  /* ---- the menu: a full-width sheet under the header, one row per link ---- */
  nav { position: absolute; top: 100%; left: 0; right: 0; width: auto; }
  nav ul {
    display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 1.25rem 1.25rem;
    background: rgba(8, 4, 10, 0.98); border-top: 1px solid var(--accent-border-soft); border-bottom: 1px solid var(--accent-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; width: 100%; max-width: none;
    border-radius: 0; z-index: 1500;
  }
  nav ul.active { display: flex; }
  nav ul li { width: 100%; text-align: left; margin: 0; }
  nav ul li a {
    display: block; font-family: var(--font-ui); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em;
    padding: 0.95rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--text-light);
  }
  /* Menu rows read in the body face like the links above them (the page default is
     the display face, so these would otherwise come out serif). */
  .nav-status-item { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--font-body); }
  .nav-language-item { font-family: var(--font-body); }
  .nav-status { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
  .nav-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2); }
  .nav-status.is-open .nav-status__dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
  .nav-language-item { display: flex !important; justify-content: space-between; align-items: center; padding: 1rem 0 0 !important; border-top: 0; margin: 0; }
  .nav-language-label { display: inline; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

  /* ---- rhythm: tighter sections, left-aligned reading ---- */
  #about { padding: 3rem 0; }
  #products { padding: 2.5rem 0 3rem; }
  #order { padding: 3rem 0; }
  #contact { padding: 2.5rem 0 3rem; }
  .lx-strip__inner { flex-direction: column; gap: 0.9rem; padding: 1.1rem 1.25rem; }
  .lx-strip__links { justify-content: center; gap: 0.6rem; }

  /* ---- about: photo first, cropped to 4:3, text left-aligned ---- */
  .about-container { gap: 1.75rem; }
  .about-image { order: -1; max-width: none; aspect-ratio: 4 / 3; justify-self: stretch; }
  .about-text, .about-text h2, .about-text p { text-align: left; }
  .about-text h2 { font-size: 2rem; margin-bottom: 1rem; }
  .about-text p { font-size: 1rem; line-height: 1.7; }

  /* ---- products: one-line title, full-width menu button ---- */
  .products-head { gap: 1rem; margin-bottom: 1.5rem; }
  .products-head .section-title { font-size: 1.9rem; }
  .products-cta { width: 100%; text-align: left; }
  .products-cta .btn { width: 100%; }

  /* ---- order: no repeated photo, stacked full-width buttons, no dangling "or" ---- */
  .order-visual .order-photo { display: none; }
  .order-copy .section-title { font-size: 2rem; }
  .order-steps { gap: 1rem; margin-bottom: 1.8rem; }
  .order-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .order-actions .lx-or { display: none; }
  .order-actions .pill, .order-actions .pill .btn { width: 100%; }
  .order-actions .btn { justify-content: center; text-align: center; }
  .order-options { gap: 0.75rem; }
  .order-option { padding: 1rem 1.1rem; }
  .order-option p { font-size: 1rem; }

  /* ---- contact: everything left-aligned, buttons full width ---- */
  .contact-card { padding: 1.5rem 1.25rem; }
  .contact-info, .contact-info address, .contact-info p, .contact-card .section-title, .contact-card .section-subtitle { text-align: left; }
  .contact-info address { display: block; margin: 0; }
  .contact-info .contact-pair { grid-template-columns: 1fr 1fr; }
  .whatsapp-btn { width: 100%; justify-content: center; }
  .contact-form { width: 100%; min-width: 0 !important; padding: 0; margin: 0; grid-template-columns: 1fr; }
  .contact-form textarea { min-height: 170px; }
  .contact-form input, .contact-form textarea { width: 100%; }
  .contact-form .btn { align-self: stretch; width: 100%; }

  /* ---- hero: stacked, same-width buttons ---- */
  .hero__actions { grid-auto-flow: row; width: 100%; max-width: 22rem; }
}
@media (max-width: 520px) {
  .hero .lx-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; }
  .products-track .product-card { flex-basis: 100%; }
  .lx-main { padding: 0 1.25rem; }
  #products .section-container, .products-slider { padding: 0 1.25rem; }
  .slider-nav-btn--prev { left: calc(1.25rem - 25px); }
  .slider-nav-btn--next { right: calc(1.25rem - 25px); }
  .hero h1 { font-size: 2.4rem; }
  .hero p { font-size: 1.05rem; }
  .about-text h2, .order-copy .section-title, .contact-card .section-title { font-size: 2rem; }
  .order-options, .contact-info .contact-pair { grid-template-columns: 1fr; }
  .lx-strip__inner { gap: 1rem; padding: 1.1rem 1.25rem; }
}