/* BeycanGrup — brand.css
 * Custom layer on top of Tailwind CDN (brand theme in _Layout.cshtml).
 * Only for things Tailwind utilities don't cover cleanly:
 *   - Ornament champagne divider (gradient 1px)
 *   - Editorial drop-cap (::first-letter)
 *   - Gotham @font-face stub (licensed font, swap when ready)
 *   - prefers-reduced-motion respect
 *   - Image placeholder (checkerboard, prototype phase)
 */

/* ─── Fonts ─────────────────────────────────────────────────────
 * Fraunces + Inter loaded via Google Fonts <link> in _Layout.cshtml.
 * When Gotham is licensed, uncomment the @font-face block below
 * and place web font files under wwwroot/fonts/gotham/.
 */

/*
@font-face {
  font-family: 'Gotham';
  font-weight: 300;
  src: url('/fonts/gotham/Gotham-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  font-weight: 400;
  src: url('/fonts/gotham/Gotham-Book.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  font-weight: 500;
  src: url('/fonts/gotham/Gotham-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  font-weight: 700;
  src: url('/fonts/gotham/Gotham-Bold.woff2') format('woff2');
  font-display: swap;
}
*/

/* ─── Ornament divider ────────────────────────────────────────── */

.ornament-champagne {
  width: 80px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #E8D6A8 50%,
    transparent 100%
  );
}

.ornament-champagne--wide {
  width: 160px;
}

.ornament-champagne--full {
  width: 100%;
}

/* ─── Drop-cap for editorial intro paragraph ─────────────────── */

.drop-cap::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 4.75rem;
  line-height: 0.85;
  float: left;
  margin-right: 0.75rem;
  margin-top: 0.35rem;
  color: #0A0F0D;
}

/* ─── Smooth scroll ───────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ─── Motion safety ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Body baseline ───────────────────────────────────────────── */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Image placeholder utility (prototype phase) ─────────────
 * Gray slot with centered label, used until real assets arrive.
 */

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3D443F;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  background-color: #E5E3DB;
  background-image:
    linear-gradient(45deg, #DEDCD3 25%, transparent 25%),
    linear-gradient(-45deg, #DEDCD3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #DEDCD3 75%),
    linear-gradient(-45deg, transparent 75%, #DEDCD3 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.image-slot--dark,
html.dark .image-slot {
  color: #7A8079;
  background-color: #1A201D;
  background-image:
    linear-gradient(45deg, #14181A 25%, transparent 25%),
    linear-gradient(-45deg, #14181A 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #14181A 75%),
    linear-gradient(-45deg, transparent 75%, #14181A 75%);
}

/* ─── Reveal-on-scroll (driven by wwwroot/js/reveal.js) ──────────
 * Apply via [data-reveal] attribute. JS adds .reveal then .reveal--in.
 * Variants:
 *   data-reveal              → fade + up (default)
 *   data-reveal="left"       → fade + slide from left
 *   data-reveal="right"      → fade + slide from right
 *   data-reveal="scale"      → fade + scale
 *   data-reveal-delay="N"    → ms delay before in (for stagger)
 */

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal[data-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(36px, 0, 0); }
.reveal[data-reveal="scale"] { transform: scale(0.96); }
.reveal[data-reveal="fade"]  { transform: none; }

.reveal--in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Marquee (horizontal infinite scroll for logo strips) ───────
 * Markup:
 *   <div class="marquee">
 *     <div class="marquee__track">
 *       [logos x N] then [duplicate logos x N]   ← duplication needed for seamless loop
 *     </div>
 *   </div>
 * Set custom speed via inline style: --marquee-duration: 24s
 */

.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 36s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ─── Form select dropdown chevron (theme-aware) ─────────────────
 * SVG arrow color swaps with html.dark class.
 * Use class="cf-select" on <select> elements.
 */

.cf-select {
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B3D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

html.dark .cf-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E8D6A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Açılan native <option> listesi — kapalı select bg-transparent kalır ama
 * açılınca tarayıcı native beyaz zemin + light metin verip dark mode'da okunmaz oluyordu.
 * Option'ları explicit temalı yap (Windows Chrome/Edge option bg/color'ı onurlandırır). */
.cf-select option {
  background-color: #FAFAF7;
  color: #0A0F0D;
}
html.dark .cf-select option {
  background-color: #1A201D;
  color: #FAFAF7;
}