/* ============================================================
   AO Events — shared design tokens
   Editorial wedding atelier. Quiet luxury. Tuz + Defne + Mercan.
   ============================================================ */

:root {
  /* Palette */
  --tuz: #F4F1EC;          /* off-white, primary surface */
  --tuz-deep: #ECE7DE;     /* shadow tone of tuz */
  --defne: #2C3A2E;        /* deep green, dark band + primary mark */
  --defne-soft: #3a4a3c;
  --ipek: #D9C7AE;         /* warm beige, secondary surface */
  --ipek-deep: #C9B595;
  --mercan: #C6694F;       /* coral, accent only */
  --gece: #1A1A1A;         /* near-black body text */
  --gece-soft: #4a4a48;
  --line: rgba(26,26,26,0.16);
  --line-soft: rgba(26,26,26,0.08);

  /* Type — variation-specific overrides set --display + --body */
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-eyebrow: 11px;
  --t-body: 16px;
  --t-lede: 20px;
  --t-h3: 28px;
  --t-h2: 44px;
  --t-h1: 80px;
  --t-display: 132px;

  /* Spacing */
  --gap: 24px;
  --pad: 48px;
  --section: 140px;

  /* Page width */
  --max: 1440px;
  --max-text: 720px;
}

@media (max-width: 768px) {
  :root {
    --t-h3: 22px;
    --t-h2: 32px;
    --t-h1: 48px;
    --t-display: 64px;
    --pad: 24px;
    --section: 80px;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--gece);
  background: var(--tuz);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a.accent { color: var(--mercan); }
a.accent:hover { color: var(--defne); }

/* ---------- Eyebrow & captions ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gece-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mercan);
}

.eyebrow-noDot::before { display: none; }

.cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gece-soft);
}

.italic { font-style: italic; }

/* ---------- Image zone (placeholder OR real photo) ----------
   Drop a <picture> or <img> as the first child to replace the
   placeholder. The caption/num/dot decorations stay on top. */
.img {
  position: relative;
  background: var(--ipek);
  overflow: hidden;
  isolation: isolate;
}
.img > picture, .img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.img > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* when a photo is in place, caption gets a soft dark scrim for legibility */
.img.has-photo .cap, .img.has-photo .cap-bl, .img.has-photo .num {
  color: var(--tuz);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  opacity: 0.95;
}
.img.has-photo .dot { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.img::before {
  /* subtle paper-grain via layered gradient */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%),
    linear-gradient(315deg, rgba(0,0,0,0.05), transparent 40%);
  pointer-events: none;
}
.img .cap {
  position: absolute;
  top: 14px; left: 14px;
  color: var(--defne);
  opacity: 0.7;
  z-index: 2;
}
.img .cap-bl {
  position: absolute;
  bottom: 14px; left: 14px;
  color: var(--defne);
  opacity: 0.7;
  z-index: 2;
}
.img .num {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--defne);
  opacity: 0.6;
  z-index: 2;
}
.img .dot {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mercan);
  z-index: 2;
}
.img.dark { background: var(--defne); }
.img.dark .cap, .img.dark .cap-bl, .img.dark .num { color: var(--tuz); opacity: 0.6; }
.img.tuz { background: var(--tuz-deep); }
.img.tuz .cap, .img.tuz .cap-bl, .img.tuz .num { color: var(--gece); opacity: 0.55; }
.img.ipek-deep { background: var(--ipek-deep); }

/* aspect helpers */
.ar-4-5 { aspect-ratio: 4/5; }
.ar-3-4 { aspect-ratio: 3/4; }
.ar-2-3 { aspect-ratio: 2/3; }
.ar-1-1 { aspect-ratio: 1/1; }
.ar-16-9 { aspect-ratio: 16/9; }
.ar-21-9 { aspect-ratio: 21/9; }
.ar-3-2 { aspect-ratio: 3/2; }
.ar-5-7 { aspect-ratio: 5/7; }

/* ---------- Divider motif: horizon + coral dot ---------- */
.horizon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.horizon::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.horizon::after {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mercan);
}
.horizon.center::before { flex: 1; }
.horizon.center {
  justify-content: center;
}
.horizon.center::after { margin-left: 6px; }

.horizon-c {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.horizon-c::before {
  content: "";
  width: 64px; height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.horizon-c::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mercan);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defne);
  padding: 14px 22px;
  border: 1px solid var(--defne);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn:hover {
  background: var(--defne);
  color: var(--tuz);
}
.btn.coral {
  color: var(--mercan);
  border-color: var(--mercan);
}
.btn.coral:hover {
  background: var(--mercan);
  color: var(--tuz);
}
.btn.ghost {
  border: none;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
}
.btn .arrow {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(244, 241, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .links {
  display: flex;
  gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav .links a:hover { color: var(--mercan); }
.nav .right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav .lang {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nav .lang button {
  background: none;
  border: none;
  font: inherit;
  color: var(--gece-soft);
  cursor: pointer;
  padding: 4px;
}
.nav .lang button.active { color: var(--defne); }
.nav .lang .sep { opacity: 0.4; }
.nav .social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav .social a { display: flex; }
.nav .social svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .nav { padding: 16px 20px; }
  .nav .links { display: none; }
  .nav .right { gap: 14px; }
  .menu-btn { display: flex; }
}
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--defne);
}

/* ---------- Logo (Imprint) ---------- */
.imprint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.imprint .word {
  font-family: var(--display);
  letter-spacing: 0.08em;
  color: var(--defne);
}
.imprint .line {
  display: flex;
  align-items: center;
  width: 110%;
}
.imprint .line::before {
  content: "";
  flex: 1; height: 1px;
  background: var(--defne);
}
.imprint .line::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mercan);
  margin-left: 4px;
}
.imprint .sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--defne);
  font-size: 0.18em;
}
.imprint.lg .word { font-size: 8.5em; }
.imprint.md .word { font-size: 3em; }
.imprint.sm .word { font-size: 1.6em; }
.imprint .sub-md { font-size: 0.7em; font-style: italic; font-family: var(--display); }

/* nav-size imprint */
.imprint-nav {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.imprint-nav .word {
  font-family: var(--display);
  letter-spacing: 0.1em;
  font-size: 22px;
  color: var(--defne);
}
.imprint-nav .line {
  width: 100%; display: flex; align-items: center;
  margin-top: 3px;
}
.imprint-nav .line::before {
  content: ""; flex: 1; height: 1px; background: var(--defne);
}
.imprint-nav .line::after {
  content: ""; width: 4px; height: 4px;
  border-radius: 50%; background: var(--mercan); margin-left: 3px;
}
.imprint-nav .sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 9px;
  color: var(--defne);
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 2px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section.tight { padding-top: 80px; padding-bottom: 80px; }

.defne-band {
  background: var(--defne);
  color: var(--tuz);
}
.defne-band h1, .defne-band h2, .defne-band h3 { color: var(--tuz); }
.defne-band .eyebrow { color: rgba(244,241,236,0.7); }
.defne-band .cap { color: rgba(244,241,236,0.7); }

.ipek-band { background: var(--ipek); }

/* ---------- Scroll-fade utility ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.fade-up.in {
  opacity: 1;
  transform: none;
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.form label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gece-soft);
  margin-bottom: 6px;
}
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font: inherit;
  color: var(--gece);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-bottom-color: var(--mercan);
}
.form textarea { min-height: 100px; resize: vertical; }
.defne-band .form input,
.defne-band .form select,
.defne-band .form textarea {
  color: var(--tuz);
  border-bottom-color: rgba(244,241,236,0.25);
}
.defne-band .form label { color: rgba(244,241,236,0.7); }

/* ---------- Footer ---------- */
.footer {
  background: var(--defne);
  color: var(--tuz);
  padding: 80px var(--pad) 40px;
}
.footer .top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(244,241,236,0.18);
}
@media (max-width: 768px) {
  .footer .top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer .col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(244,241,236,0.6);
  margin-bottom: 18px;
}
.footer .col ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.footer .col a { color: var(--tuz); opacity: 0.85; }
.footer .col a:hover { color: var(--mercan); opacity: 1; }
.footer .bot {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244,241,236,0.5);
}
@media (max-width: 640px) {
  .footer .bot { flex-direction: column; gap: 14px; }
}

/* ---------- Social icons (inline svg) ---------- */
.icn { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }

/* ---------- Marquee ---------- */
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee .track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marq 60s linear infinite;
}

/* ---------- Carousel ---------- */
.carousel {
  position: relative;
  width: 100%;
}
.carousel .slides {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
}
.carousel .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.carousel .slide.active { opacity: 1; }
.carousel .dots {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 18px;
}
.carousel .dots button {
  width: 24px; height: 1px;
  background: var(--line);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.3s;
}
.carousel .dots button.active { background: var(--defne); }