/* ===========================
   STANDVIA — Brand Tokens
   =========================== */
:root {
  /* Primary */
  --lime: #A6D936;
  --lime-alt: #B8E940;
  --lime-glow: rgba(166, 217, 54, 0.35);

  /* Light theme */
  --bg: #F5F3EF;
  --surface: #FFFFFF;
  --card: #F9F8F6;
  --card-2: #EFEDE8;
  --ink: #000000;
  --ink-2: #666666;
  --ink-3: #999999;
  --border: #E5E5E5;
  --border-2: #ECEAE5;

  /* Dark theme */
  --d-bg: #0F0F0F;
  --d-surface: #1A1A1A;
  --d-card: #161616;
  --d-border: #262626;
  --d-ink: #FFFFFF;
  --d-ink-2: #A3A3A3;

  /* Semantic */
  --danger: #E5484D;
  --success: #6EBB48;

  /* Type */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-phone: 0 40px 80px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.10);
  --shadow-lime: 0 8px 24px rgba(166,217,54,0.35);
}

* { box-sizing: border-box; }

/* ===========================
   Artboard reset
   =========================== */
.sv-artboard {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.sv-artboard.dark {
  background: var(--d-bg);
  color: var(--d-ink);
}

/* ===========================
   Utility
   =========================== */
.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.sv-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--lime);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--lime-glow);
}

.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
  white-space: nowrap;
}
.sv-btn.primary {
  background: var(--lime);
  color: #0a0a0a;
  box-shadow: var(--shadow-lime);
}
.sv-btn.primary:hover { transform: translateY(-1px); }
.sv-btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.sv-btn.dark { background: #0a0a0a; color: #fff; }

.sv-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  min-width: 170px;
}
.sv-store-badge .ic { width: 26px; height: 26px; flex-shrink: 0; }
.sv-store-badge .small { font-size: 11px; line-height: 1; opacity: 0.75; letter-spacing: 0.04em; }
.sv-store-badge .big { font-size: 17px; font-weight: 600; line-height: 1.1; margin-top: 3px; letter-spacing: -0.02em; }

/* ===========================
   Phone frame (mobile mockup)
   =========================== */
.sv-phone {
  position: relative;
  width: 320px;
  background: #0a0a0a;
  border-radius: 46px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
}
.sv-phone .notch {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 5;
}
.sv-phone .screen {
  background: var(--bg);
  border-radius: 38px;
  overflow: hidden;
  height: 640px;
  position: relative;
}
.sv-phone .statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ===========================
   Cards / surfaces
   =========================== */
.sv-card {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
.sv-surface {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}

/* dark variants */
.dark .sv-card {
  background: var(--d-card);
  border-color: var(--d-border);
}
.dark .sv-surface {
  background: var(--d-surface);
  border-color: var(--d-border);
}
.dark .sv-eyebrow {
  background: var(--d-surface);
  border-color: var(--d-border);
  color: var(--d-ink-2);
}

/* Image placeholder — diagonal stripes */
.sv-img {
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.04) 0 8px,
      transparent 8px 16px),
    var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--r-md);
}
.dark .sv-img {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0 8px,
      transparent 8px 16px),
    #202020;
  color: #5a5a5a;
}

/* Hero shine blob */
.sv-shine {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-glow) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Headings */
.sv-h1 {
  font-size: 88px;
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
}
.sv-h2 {
  font-size: 56px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
}
.sv-h3 {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.sv-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.dark .sv-body { color: var(--d-ink-2); }

/* Lime highlight underline (for hero) */
.sv-mark {
  position: relative;
  display: inline-block;
  color: var(--ink);
  padding: 0 8px;
}
.sv-mark::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 22px;
  background: var(--lime);
  z-index: -1;
  border-radius: 4px;
  transform: skew(-4deg);
}
.dark .sv-mark { color: var(--d-ink); }

/* Section divider */
.sv-divider {
  height: 1px;
  background: var(--border);
  width: 100%;
}
.dark .sv-divider { background: var(--d-border); }

/* Badge */
.sv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--lime);
  color: #0a0a0a;
}
.sv-badge.outline {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.sv-badge.live::before {
  content: '';
  width: 6px; height: 6px;
  background: #0a0a0a;
  border-radius: 999px;
}

/* Scrollbars off in artboards */
.sv-artboard ::-webkit-scrollbar { display: none; }
.sv-artboard * { scrollbar-width: none; }

/* Notes overlay */
.sv-note {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 380px;
  line-height: 1.5;
  letter-spacing: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.sv-note b { color: var(--lime); font-weight: 600; }

/* ======================================================================
   Front-page (landing) — "Homepage V2" duzeni + responsive
   ----------------------------------------------------------------------
   Tasarim 1440px referans genislikte uretildi. Render sirasinda
   responsive olmasi gereken inline prop'lar (font-size, grid-template,
   grid span, min-height) markup'tan cikarilip asagidaki .v2-* siniflara
   tasindi. Boylece kurallar inline style ile catismaz; !important
   gerekmez. Basliklar clamp() ile akiskan olcekenir (>=1440px'te tam
   tasarim boyutuna sabitlenir, asagida orantili kuculur).
   ====================================================================== */
.sv-landing { background: var(--bg); }

/* Tam genislik kapsayici: bolumler ekran kenarina yapisir (full-bleed).
   Yatay ic boslugu .v2-pad akiskan gutter verir; marquee/koyu bolumler
   tam-genislik kalir. */
.sv-v2 {
  width: 100%;
}
.sv-v2 * { box-sizing: border-box; }
.sv-landing .sv-note { display: none; }

/* Hero: tam viewport yuksekligi, icerik dikey ortali (navbar yuksekligi dusulur) */
.v2-hero {
  min-height: calc(100vh - 74px);
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 64px;
}

/* ---------- Akiskan tipografi (clamp: min, akiskan, tasarim-max) ---------- */
.v2-display     { font-size: clamp(38px, 8.33vw, 120px); }
.v2-display-xl  { font-size: clamp(48px, 11.1vw, 160px); }
.v2-h2          { font-size: clamp(32px, 5vw, 72px); }
.v2-h2b         { font-size: clamp(30px, 4.44vw, 64px); }
.v2-bento-title { font-size: clamp(26px, 3.33vw, 48px); }
.v2-stat        { font-size: clamp(40px, 5.83vw, 84px); }
.v2-marquee-text{ font-size: clamp(36px, 6.66vw, 96px); }
.v2-cat-emoji   { font-size: clamp(44px, 5vw, 72px); }
.v2-cat-emoji-lg{ font-size: clamp(72px, 11.1vw, 160px); }

/* ---------- Grid duzenleri (masaustu = tasarim) ---------- */
.v2-navbar      { grid-template-columns: 1fr auto 1fr; }
.v2-hero-grid   { grid-template-columns: 1.4fr 1fr; }
.v2-hero-phone  { min-height: 780px; }
.v2-phone       { max-width: 100%; }

.v2-bento-grid  { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 180px; }
.v2-bt-a { grid-column: span 7; grid-row: span 2; }
.v2-bt-b { grid-column: span 5; grid-row: span 2; }
.v2-bt-c { grid-column: span 4; grid-row: span 2; }
.v2-bt-4 { grid-column: span 4; }

.v2-numbers-grid { grid-template-columns: repeat(4, 1fr); }
.v2-cats-grid    { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; }
.v2-cat-lg       { grid-row: span 2; }
.v2-cards-3      { grid-template-columns: repeat(3, 1fr); }
.v2-footer-grid  { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }

/* Bolum ic boslugu: arka plan full-bleed kalir, icerik 1520px'te ortalanir.
   max(): genis ekranda kenar boslugu (100%-1520)/2 olur (icerik asiri yayilmaz),
   dar ekranda akiskan gutter'a (clamp) duser. */
.v2-pad {
  padding-left: max(clamp(20px, 4vw, 64px), (100% - 1520px) / 2);
  padding-right: max(clamp(20px, 4vw, 64px), (100% - 1520px) / 2);
}

/* ======================================================================
   Cila (polish) — navbar linkleri, kategori/vitrin kartlari, hover'lar
   ====================================================================== */

/* Sticky navbar yuksekligi kadar scroll-margin (menuden gecilince baslik altta kalmasin) */
.v2-anchor { scroll-margin-top: 92px; }

/* Navbar menu linkleri */
.v2-navlink { text-decoration: none; cursor: pointer; transition: color .2s ease, background .2s ease; }
.v2-navbar-menu .v2-navlink:hover { color: #000; }

/* --- Kategoriler: buyuk "Emlak" tile bos durmasin --- */
.v2-cat-emoji-lg { font-size: clamp(120px, 16vw, 240px); }
.v2-cat-lg {
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(166, 217, 54, 0.18), rgba(255, 255, 255, 0) 55%),
    #fff;
}
.v2-cat-lg .v2-cat-emoji-lg {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.16));
  transform: translateY(6px);
}

/* --- Vitrin: gercek gorsel olmayan kartlarda placeholder'i sik gosterelim --- */
.v2-cards-3 .sv-img {
  color: transparent;                 /* "img"/"ariyor" placeholder yazisini gizle */
  background: linear-gradient(135deg, #ECEAE5 0%, #F7F6F3 60%, #FBFAF8 100%);
}
.v2-cards-3 .sv-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
}

/* --- Kart hover mikro-etkilesimleri (GSAP reveal ile uyumlu) --- */
.v2-cat,
.v2-cards-3 > *,
.v2-bt-a, .v2-bt-b, .v2-bt-c, .v2-bt-4 {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
  will-change: transform;
}
.v2-cat:hover,
.v2-cards-3 > *:hover,
.v2-bt-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}
.v2-navlink { will-change: auto; }

/* ---------- Tablet: <= 900px ---------- */
@media (max-width: 900px) {
  .v2-navbar       { grid-template-columns: 1fr auto; padding-left: 24px; padding-right: 24px; }
  .v2-navbar-menu  { display: none; }

  .v2-hero-grid    { grid-template-columns: 1fr; }
  .v2-hero-phone   { min-height: auto; margin-top: 28px; }

  .v2-bento-grid   { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .v2-bt-a, .v2-bt-b, .v2-bt-c, .v2-bt-4 { grid-column: auto; grid-row: auto; }

  .v2-cats-grid    { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .v2-cat-lg       { grid-row: auto; }

  .v2-numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-cards-3      { grid-template-columns: repeat(2, 1fr); }
  .v2-footer-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Telefon: <= 600px ---------- */
@media (max-width: 600px) {
  .v2-bento-grid,
  .v2-cats-grid,
  .v2-numbers-grid,
  .v2-cards-3,
  .v2-footer-grid { grid-template-columns: 1fr; }

  .v2-hero-actions { flex-wrap: wrap; }
  .v2-hero-actions .sv-store-badge { min-width: 0; flex: 1 1 150px; }

  /* Marquee telefonda biraz daralir (full-bleed kalir) */
  .v2-marquee { padding-top: 24px; padding-bottom: 24px; }
}