:root {
    --ink: #0a0a09;
    --ink-2: #141311;
    --marble-1: #ede7dc;
    --marble-2: #cfc6b4;
    --marble-3: #9c9284;
    --gold: #c9a86a;
    --gold-dim: #8a7346;
    --text-on-dark: #f3efe6;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--ink);
    font-family: 'Inter', sans-serif;
  }

  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(201,168,106,0.08), transparent 55%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  }

  .hero-copy {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8vw;
    z-index: 5;
    pointer-events: none;
  }

  .hero-copy > * { pointer-events: auto; }

  .brand-frame {
    position: relative;
    padding: 22px 56px 22px 40px;
    border-top: 6px solid rgba(243,239,230,0.75);
    border-left: 6px solid rgba(243,239,230,0.75);
    border-bottom: 6px solid rgba(243,239,230,0.75);
  }

  .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 22px;
    font-weight: 500;
  }

  .headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(40px, 6.2vw, 84px);
    line-height: 1.04;
    color: var(--text-on-dark);
    margin: 0 0 24px;
    max-width: 11ch;
    letter-spacing: 0.005em;
  }

  .headline em {
    font-style: italic;
    color: var(--marble-1);
  }

  .subline {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(243,239,230,0.7);
    max-width: 34ch;
    margin: 0 0 40px;
    font-weight: 400;
  }

  .cta-row {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .cta-button {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    background: var(--gold);
    border: none;
    padding: 17px 34px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .cta-button:hover {
    background: #ddbd85;
    transform: translateY(-1px);
  }

  /* Buton artık bir <a> (WhatsApp linki); tema link stilleri ezmesin. */
  .hero a.cta-button,
  .hero a.cta-button:link,
  .hero a.cta-button:visited,
  .hero a.cta-button:hover,
  .hero a.cta-button:focus {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    line-height: normal;
  }

  .cta-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(243,239,230,0.45);
    letter-spacing: 0.02em;
  }

  .curtain-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    z-index: 2;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%);
    mask-image: linear-gradient(90deg, transparent, black 12%);
  }

  .curtain-rod {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-dim) 15%, var(--gold) 50%, var(--gold-dim) 85%, transparent);
    z-index: 3;
    opacity: 0.55;
  }

  .statue-photo {
    position: absolute;
    top: 50%;
    left: 71%;
    height: 66%;
    width: auto;
    max-width: 34.5%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: contain;
    filter: drop-shadow(0 40px 70px rgba(0,0,0,0.65));
    pointer-events: none;
  }

  .strip {
    position: absolute;
    top: 0;
    height: 100%;
    transform-origin: top center;
    will-change: transform;
  }

  .strip-inner {
    width: 100%;
    height: 100%;
  }

  .static-note {
    position: absolute;
    right: 6%;
    bottom: 6%;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: rgba(243,239,230,0.35);
    z-index: 5;
  }

  @media (max-width: 900px) {
    .hero-copy { padding: 0 7vw; align-items: center; text-align: center; }
    .headline { max-width: 14ch; margin-left: auto; margin-right: auto; }
    .subline { max-width: 32ch; }
    .curtain-wrap { width: 100%; opacity: 0.5; -webkit-mask-image: linear-gradient(0deg, transparent, black 20%); mask-image: linear-gradient(0deg, transparent, black 20%); }
    .statue-photo { left: 50%; right: auto; top: 40%; height: auto; width: 93%; max-width: 480px; transform: translate(-50%, -50%); }
    .brand-frame { background: rgba(10,10,9,0.62); }
    .cta-row { flex-direction: column; gap: 14px; }
    .static-note { display: none; }
  }