/*
 * Cloud Atelier — Editorial Stylesheet
 * Designer: Yuki Tanaka (Senior Designer)
 * Inspired by: Sanzo Wada (1933), Wallpaper* Magazine, Monocle, NYT print
 *
 * 7 Prensip:
 *  1. Asymmetric grid    — kasıtlı off-balance
 *  2. Type contrast      — 90px display vs 14px body
 *  3. Hand-feel dividers — off-pixel, asymmetric
 *  4. Subtle grain       — SVG noise %2 opacity
 *  5. Generous whitespace— nefes
 *  6. Editorial caps     — 0.18em letter-spacing
 *  7. Color over decor   — gradient/glow/blob YOK
 *
 * Bu dosya design-tokens.css'in ÜZERİNE yüklenir.
 * Tüm değerler design-tokens'tan referans alınır.
 */

@import url("./design-tokens.css");

/* ============================================================
 * 1. ASYMMETRIC GRID — 12 col değil, intentional 7-3-2 split
 * ============================================================ */

.ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--ca-space-12);
  max-width: var(--ca-container-max);
  margin: 0 auto;
  padding: 0 var(--ca-space-6);
}

.ed-grid-main {
  grid-column: 1;
}
.ed-grid-side {
  grid-column: 2;
}
.ed-grid-aux {
  grid-column: 3;
}

@media (max-width: 900px) {
  .ed-grid {
    grid-template-columns: 1fr;
    gap: var(--ca-space-6);
  }
  .ed-grid-main,
  .ed-grid-side,
  .ed-grid-aux {
    grid-column: 1;
  }
}

/* ============================================================
 * 2. TYPOGRAPHY — Magazine-grade contrast
 * ============================================================ */

.ed-hero {
  font-family: var(--ca-font-display);
  font-size: clamp(48px, 12vw, 144px); /* dev gibi büyür */
  line-height: 0.88;
  letter-spacing: -0.02em; /* tight on big */
  font-weight: 400;
  color: var(--ca-text-primary);
  margin: 0 0 var(--ca-space-8);
  text-wrap: balance; /* modern browsers */
}

.ed-section-label {
  font-family: var(--ca-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em; /* editorial caps */
  color: var(--ca-brand-red);
  margin-bottom: var(--ca-space-3);
  display: inline-block;
  position: relative;
  padding-left: var(--ca-space-4);
}

.ed-section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.ed-headline {
  font-family: var(--ca-font-display);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ca-text-primary);
  margin: 0 0 var(--ca-space-5);
}

.ed-subhead {
  font-family: var(--ca-font-body);
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ca-text-secondary);
  max-width: 52ch;
  margin: 0 0 var(--ca-space-8);
}

.ed-body {
  font-family: var(--ca-font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ca-text-secondary);
  max-width: var(--ca-prose-max);
}

.ed-body p + p {
  margin-top: var(--ca-space-5);
}

.ed-body p:first-of-type::first-letter {
  /* drop cap, editorial detail */
  font-family: var(--ca-font-display);
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  padding: 0.05em var(--ca-space-3) 0 0;
  color: var(--ca-brand-red);
}

.ed-byline {
  font-family: var(--ca-font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
  margin-bottom: var(--ca-space-4);
}

/* ============================================================
 * 3. HAND-FEEL DIVIDERS — Intentionally imperfect
 * ============================================================ */

.ed-rule {
  border: none;
  height: 1px;
  background: var(--ca-text-primary);
  margin: var(--ca-space-12) 0;
  position: relative;
  /* Off-pixel: solid line ama %15 saydam, gerçek mürekkep gibi */
  opacity: 0.15;
}

.ed-rule-red {
  background: var(--ca-brand-red);
  height: 2px;
  width: 64px;
  margin: var(--ca-space-6) 0;
  opacity: 1;
}

.ed-rule-double {
  border: none;
  border-top: 1px solid var(--ca-text-primary);
  border-bottom: 1px solid var(--ca-text-primary);
  height: 6px;
  opacity: 0.2;
  margin: var(--ca-space-10) 0;
}

/* ============================================================
 * 4. GRAIN TEXTURE — Subtle paper feel
 * ============================================================ */

.ed-grain {
  position: relative;
}

.ed-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
}

/* ============================================================
 * 5. WHITESPACE — Editorial breathing
 * ============================================================ */

.ed-section {
  padding: var(--ca-space-20) 0;
}

.ed-section-tight {
  padding: var(--ca-space-12) 0;
}

.ed-container {
  max-width: var(--ca-content-max);
  margin: 0 auto;
  padding: 0 var(--ca-space-6);
}

.ed-container-prose {
  max-width: var(--ca-prose-max);
  margin: 0 auto;
  padding: 0 var(--ca-space-6);
}

/* ============================================================
 * 6. EDITORIAL CAPS — Section titles
 * ============================================================ */

.ed-eyebrow {
  font-family: var(--ca-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ca-text-muted);
  margin-bottom: var(--ca-space-2);
}

.ed-kicker {
  font-family: var(--ca-font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ca-brand-red);
  margin-bottom: var(--ca-space-3);
}

/* ============================================================
 * 7. EDITORIAL CARDS — Print magazine pattern
 * ============================================================ */

.ed-card {
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border-default);
  padding: var(--ca-space-8);
  position: relative;
  transition: border-color var(--ca-transition-base);
}

.ed-card:hover {
  border-color: var(--ca-brand-red);
}

.ed-card-number {
  position: absolute;
  top: var(--ca-space-4);
  right: var(--ca-space-4);
  font-family: var(--ca-font-display);
  font-size: 14px;
  color: var(--ca-text-muted);
  letter-spacing: 0.1em;
}

/* ============================================================
 * LEGAL / PRIVACY PAGE THEME (Sanzo Wada cream)
 * ============================================================ */

.ed-legal-page {
  background: var(--wada-shironeri);
  color: var(--wada-sumi);
  min-height: 100vh;
  padding: var(--ca-space-12) var(--ca-space-6);
  font-family: var(--ca-font-body);
  font-size: 16px;
  line-height: 1.7;
}

.ed-legal-page .ed-hero,
.ed-legal-page .ed-headline {
  color: var(--wada-sumi);
}

.ed-legal-page .ed-subhead {
  color: #4a4a4a;
}

.ed-legal-page .ed-rule {
  background: var(--wada-sumi);
}

.ed-legal-page a {
  color: var(--ca-brand-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ed-legal-page .ed-section-label {
  color: var(--ca-brand-red);
}

.ed-legal-page .ed-container-prose {
  background: var(--wada-shironeri);
  position: relative;
}

/* ============================================================
 * LANGUAGE SWITCHER — TR / EN nav element
 * ============================================================ */

.ed-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  font-family: var(--ca-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ed-lang-switch button {
  background: transparent;
  border: none;
  padding: var(--ca-space-2) var(--ca-space-3);
  color: var(--ca-text-muted);
  cursor: pointer;
  transition: color var(--ca-transition-fast);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  min-height: var(--ca-touch-min);
  min-width: var(--ca-touch-min);
}

.ed-lang-switch button:hover,
.ed-lang-switch button:focus-visible {
  color: var(--ca-text-primary);
  outline: none;
}

.ed-lang-switch button[aria-current="true"] {
  color: var(--ca-brand-red);
}

.ed-lang-switch .sep {
  color: var(--ca-text-muted);
  opacity: 0.4;
  user-select: none;
}

/* ============================================================
 * MOBILE POLISH — global mobile fixes
 * ============================================================ */

@media (max-width: 768px) {
  .ed-hero {
    font-size: clamp(40px, 14vw, 80px);
  }
  .ed-section {
    padding: var(--ca-space-12) 0;
  }
  .ed-section-tight {
    padding: var(--ca-space-8) 0;
  }

  /* Drop cap looks bad on tiny screens */
  .ed-body p:first-of-type::first-letter {
    font-size: 3em;
  }
}

/* iOS Safari tap highlight removal */
html,
body,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Hover only on real hover devices */
@media (hover: hover) {
  .ed-card:hover {
    transform: translateY(-2px);
    transition:
      transform var(--ca-transition-base),
      border-color var(--ca-transition-base);
  }
}

/* Android pull-to-refresh overscroll fix */
html,
body {
  overscroll-behavior-y: contain;
}

/* Prevent iOS body bounce inside scrollable cards */
.ed-scroll-card {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overscroll-behavior: contain;
}