/* ============================================
   InkMix — Design Tokens
   ============================================ */
:root {
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Aydınlık tema */
:root[data-theme="light"] {
  --bg: #f6f6f4;
  --panel-bg: #ffffff;
  --border: rgba(20, 20, 20, 0.08);
  --text: #1a1a1a;
  --text-muted: #8a8a8a;
  --swatch-bg: #ffffff;
  --swatch-ring: rgba(20, 20, 20, 0.16);
  --scrollbar: rgba(20, 20, 20, 0.18);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Karanlık tema */
:root[data-theme="dark"] {
  --bg: #101013;
  --panel-bg: #18181c;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f2f2f0;
  --text-muted: #76767e;
  --swatch-bg: #202024;
  --swatch-ring: rgba(255, 255, 255, 0.35);
  --scrollbar: rgba(255, 255, 255, 0.18);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

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

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ============================================
   Sol Panel
   ============================================ */
.swatch-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.brand h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Header aksiyonları: çıkış + tema */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Çıkış düğmesi */
.sign-out-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--swatch-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.sign-out-btn svg {
  width: 15px;
  height: 15px;
}

.sign-out-btn:hover {
  transform: translateY(-1px);
  border-color: var(--swatch-ring);
  background: var(--border);
}

/* Tema düğmesi */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--swatch-bg);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.theme-toggle:hover {
  transform: rotate(12deg) scale(1.05);
  border-color: var(--swatch-ring);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
  transition: opacity var(--transition), transform var(--transition);
}

:root[data-theme="light"] .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

:root[data-theme="light"] .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

:root[data-theme="dark"] .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Grup filtresi: yatay kaydırılabilir */
.group-filter {
  position: relative; /* filtre düğmelerinin offsetLeft'i bu kaba göre hesaplansın */
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}

.group-filter[hidden] {
  display: none;
}

.group-filter::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
}

.filter-count {
  font-size: 11px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Renk ızgarası: 4 sütun, dikey kaydırılabilir */
.swatch-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start; /* filtrede az renk kaldığında satırlar uzayıp taşmasın */
  gap: 10px;
  padding: 20px 24px;
}

/* İnce scrollbar (WebKit/Chromium) */
.swatch-grid::-webkit-scrollbar {
  width: 8px;
}

.swatch-grid::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
}

.swatch-grid::-webkit-scrollbar-track {
  background: transparent;
}

/* Renk kutusu */
.swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--swatch-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.swatch[hidden] {
  display: none;
}

.swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--swatch-ring);
}

.swatch:focus-visible {
  outline: 2px solid var(--swatch-ring);
  outline-offset: 2px;
}

.swatch.selected {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px var(--swatch-ring);
}

.swatch-number {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity var(--transition);
}

.swatch.selected .swatch-number {
  opacity: 1;
}

.swatch.selected:hover .swatch-number {
  transform: scale(1.06);
  transition: transform var(--transition), opacity var(--transition);
}

/* ============================================
   Sağ Panel
   ============================================ */
.preview-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: background var(--transition);
}

.preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  text-align: center;
  padding: 24px;
  user-select: none;
}

.preview-label {
  font-size: 13px;
  font-weight: 500;

  text-transform: uppercase;
  opacity: 0.65;

}

.preview-number {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.65;
}

/* Kredi bağlantısı */
.credit {
  margin: auto auto;
  padding: 14px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}

.credit:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.credit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================
   Reçete Kartı
   ============================================ */
.recipe-card {
  margin-top: 28px;
  padding: 20px 24px;
  min-width: 320px;
  max-width: 480px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: text;
  transition: opacity var(--transition), transform var(--transition);
}

.recipe-card.empty {
  opacity: 0.45;
}

.recipe-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}

.recipe-text {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0.94;
}

/* ============================================
   Mobil: dikey yerleşim
   ============================================ */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 45vh 55vh;
  }

  .swatch-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .swatch-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 16px;
  }

  .panel-header {
    padding: 14px 16px;
  }

  .group-filter {
    padding: 10px 16px;
  }
}

/* ============================================
   Giriş & Uyarı Ekranları
   ============================================ */
.screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

/* Giriş + tanıtım: kaydırılabilir sayfa */
#authScreen.active {
  display: block;
  padding: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

/* --- Üst menü (her zaman koyu, cam efekti) --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 28px;
  color: #f4f4f2;
  background: rgba(11, 11, 14, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.nav-brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(244, 244, 242, 0.72);
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--transition), background var(--transition);
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-signin {
  min-height: 40px;
  align-items: center;
}

/* Durum mesajı: menünün altında küçük bildirim */
.auth-status {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 30;
  max-width: 340px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #f4f4f2;
  background: rgba(24, 24, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.auth-status:empty {
  display: none;
}

.auth-status.error {
  border-color: rgba(229, 72, 77, 0.6);
  color: #ffb4b6;
}

.google-signin {
  display: flex;
  min-height: 44px;
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -64px;
  display: flex;
  align-items: center;
  padding: 120px 28px 72px;
  color: #f4f4f2;
  background: #0b0b0e;
  overflow: hidden;
  isolation: isolate;
}

/* Arka plan: temel renklerden yumuşak ışık lekeleri (yalnızca CSS) */
.hero-bg {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(28% 34% at 18% 28%, rgba(254, 115, 0, 0.32), transparent 70%),
    radial-gradient(26% 32% at 82% 22%, rgba(199, 17, 59, 0.34), transparent 70%),
    radial-gradient(34% 40% at 70% 78%, rgba(40, 38, 190, 0.38), transparent 70%),
    radial-gradient(24% 30% at 28% 80%, rgba(10, 140, 60, 0.26), transparent 70%),
    radial-gradient(18% 22% at 50% 50%, rgba(254, 242, 8, 0.12), transparent 70%);
  filter: blur(20px);
  animation: hero-drift 24s ease-in-out infinite alternate;
}

.hero::after {
  /* Hafif doku: sayfanın alt kenarına doğru koyulaşma */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 60%, rgba(11, 11, 14, 0.85));
  pointer-events: none;
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(3%, -2%, 0) rotate(8deg) scale(1.06); }
}

.hero-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero-gradient {
  background: linear-gradient(90deg, #fef208 0%, #fe7300 28%, #fd130e 50%, #c7113b 68%, #7b6cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 480px;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244, 244, 242, 0.7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #f4f4f2;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: background var(--transition), border-color var(--transition);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero-stats {
  list-style: none;
  display: flex;
  gap: 36px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stats strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-stats span {
  font-size: 13px;
  color: rgba(244, 244, 242, 0.6);
}

/* --- Hero görseli: temel renkler halkası + karışım sonucu --- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mix-stage {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
}

.mix-ring {
  position: absolute;
  inset: 0;
}

/* Damlaların üzerinde durduğu yörünge çizgisi */
.mix-ring::before {
  content: "";
  position: absolute;
  inset: 20%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

/* Flat damla: düz renk, gölge/parlama yok */
.mix-drop {
  --size: 15%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  aspect-ratio: 1;
  /* Damla şekli: üst köşe sivri */
  border-radius: 50% 50% 50% 0;
  background: var(--c);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-265%) rotate(calc(-1 * var(--a))) rotate(135deg) scale(0.78);
  opacity: 0.22;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mix-drop.active {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-238%) rotate(calc(-1 * var(--a))) rotate(135deg) scale(1.05);
}

/* Beyaz ve siyah damlalar koyu zeminde kaybolmasın: ince düz kontur */
.mix-drop[data-outline] {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: -2px;
}

/* Flat sonuç dairesi + arkasında düz renkli halka */
.mix-result {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--mix, #6063ad);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  transition: background 500ms ease;
}

.mix-num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mix-text, #fff);
  font-variant-numeric: tabular-nums;
  transition: color 500ms ease;
}

.mix-caption {
  min-height: 2.8em;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: rgba(244, 244, 242, 0.75);
  transition: opacity 300ms ease;
}

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

  .mix-drop,
  .mix-result {
    transition: none;
  }
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mix-stage {
    width: min(300px, 80vw);
  }

  .nav-links {
    display: none;
  }

  .nav-register {
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .site-nav {
    padding: 0 16px;
  }

  .hero {
    padding: 96px 16px 56px;
  }

  .hero-stats {
    gap: 24px;
  }

  .auth-status {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

.screen.active {
  display: flex;
}

/* Ana uygulama: yalnızca yetki sonrası görünür */
#appRoot {
  display: none;
}

#appRoot.active {
  display: grid;
}

/* --- Uyarı kartı --- */
.warning-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 44px 36px 36px;
  text-align: center;
}

.warning-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 16px;
}

.warning-card h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.warning-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.warning-text strong {
  color: var(--text);
  word-break: break-all;
}

.warning-note {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
  margin-bottom: 24px;
}

.btn-primary {
  display: inline-block;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}

.btn-primary:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:root[data-theme="dark"] .btn-primary {
  background: #f2f2f0;
  color: #101013;
}

/* --- Tanıtım bölümleri --- */
.landing-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px 16px;
}

.landing-section h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.landing-section .subhead {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 32px 0 14px;
}

.landing-lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 640px;
}

.color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
  flex-shrink: 0;
}

.color-dot.lg {
  width: 22px;
  height: 22px;
}

.base-bottles {
  padding: 24px 24px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Görsel 9 eşit şişe sütunundan oluşur; etiketler aynı ızgarada hizalanır */
.base-bottle-labels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  margin-top: 12px;
}

.base-bottle-labels li {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .base-bottles {
    padding: 16px 10px 12px;
  }

  .base-bottle-labels li {
    font-size: 10px;
    font-weight: 500;
  }
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.sample-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sample-swatch {
  height: 110px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sample-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 14px;
}

.sample-recipe {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.sample-dots {
  display: flex;
  gap: 6px;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.landing-cta p {
  font-size: 15px;
  font-weight: 500;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* --- Neden inkmixR --- */
.mix-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 32px 28px 28px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.showcase-top,
.showcase-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-top picture {
  width: 100%;
  max-width: 680px;
}

.shelf-bottles {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.showcase-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  text-align: center;
}

.showcase-label strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.showcase-label span {
  font-size: 13px;
  color: var(--text-muted);
}

.showcase-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 12px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.showcase-arrow svg {
  width: 22px;
  height: 22px;
}

/* 170 renk: masaüstünde 34×5, tablet/mobilde 17×10 */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(34, 1fr);
  gap: 4px;
  width: 100%;
}

.palette-grid span {
  aspect-ratio: 1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 900px) {
  .palette-grid {
    grid-template-columns: repeat(17, 1fr);
  }
}

@media (max-width: 640px) {
  .mix-showcase {
    padding: 24px 16px 20px;
  }

  .palette-grid {
    gap: 3px;
  }

  .palette-grid span {
    border-radius: 3px;
  }
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.benefit {
  padding: 22px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
}

.benefit:nth-child(3n + 2) .benefit-icon {
  background: linear-gradient(135deg, #c7113b, #4b3cc9);
}

.benefit:nth-child(3n) .benefit-icon {
  background: linear-gradient(135deg, #1b5aa8, #0f9c9a);
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
}

.benefit h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 14px 0 6px;
}

.benefit p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Adım kartları */
.step-grid,
.tip-grid,
.dimension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.step-card,
.tip,
.dimension-card {
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.step-card h3,
.dimension-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 6px;
}

.dimension-card h3 {
  margin-top: 0;
}

.dimension-card h3 span {
  font-weight: 400;
  color: var(--text-muted);
}

.step-card p,
.tip p,
.dimension-card p,
.callout p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
}

.tip h4,
.callout h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Kontrol listesi */
.check-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 20px;
  max-width: 720px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.check-list li strong {
  color: var(--text);
  font-weight: 600;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
}

.callout {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--text);
  background: var(--panel-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Renk çemberi */
.wheel-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}

.color-wheel {
  width: 100%;
  height: auto;
  display: block;
}

.wheel-seg {
  stroke: var(--bg);
  stroke-width: 1.5;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  transform-origin: 0 0;
}

.wheel-seg.dim {
  opacity: 0.18;
}

.wheel-seg.base {
  transform: scale(1.05);
}

.wheel-seg:focus-visible {
  outline: none;
  stroke: var(--text);
  stroke-width: 3;
}

.wheel-center {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
}

.harmony-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.harmony-tab,
.filter-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.harmony-tab:hover,
.filter-chip:hover {
  border-color: var(--swatch-ring);
}

.harmony-tab[aria-selected="true"],
.filter-chip[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.harmony-info {
  margin-top: 20px;
}

.harmony-info h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.harmony-info p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  min-height: 4.8em;
}

.harmony-swatches {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.harmony-swatches li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 84px;
  font-size: 12px;
}

.harmony-chip {
  height: 52px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border);
}

.harmony-name {
  font-weight: 600;
}

.harmony-kind {
  color: var(--text-muted);
}

/* Ton / Değer / Kroma şeritleri */
.scale-strip {
  display: flex;
  height: 28px;
  margin-top: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.scale-strip span {
  flex: 1;
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Ekran/marka uyarısı */
.color-disclaimer {
  max-width: 480px;
  margin: 20px auto 0;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.75;
}

.landing-disclaimer {
  max-width: none;
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--swatch-ring);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  opacity: 1;
}

@media (max-width: 768px) {
  .wheel-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wheel-wrap {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* Mobil: uyarı kartı daha dar */
@media (max-width: 480px) {
  .warning-card {
    padding: 32px 22px 26px;
  }

  .landing-section {
    padding: 48px 16px 8px;
  }
}
/* ============================================
   Üyelik başvuru sayfası (register.html)
   ============================================ */
.register-page .site-nav {
  background: #0b0b0e;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #0b0b0e;
  background: #f4f4f2;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity var(--transition);
}

.nav-cta:hover {
  opacity: 0.85;
}

.nav-links + .nav-cta {
  margin-left: 0;
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 28px 24px;
  align-items: start;
}

.register-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 36px 0;
  color: #f4f4f2;
  background: #0b0b0e;
  border-radius: var(--radius-md);
}

.register-intro h1 {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.register-lead {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 244, 242, 0.72);
}

.register-perks {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.register-perks li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 244, 242, 0.88);
}

.register-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  color: #0b0b0e;
  background: linear-gradient(135deg, #fe7300, #fef208);
  border-radius: 50%;
}

.register-bottles {
  display: block;
  margin-top: 32px;
}

.register-bottles img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Form kartı --- */
.register-card {
  padding: 32px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.register-form h2,
.register-success h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.form-intro {
  margin: 4px 0 24px;
  font-size: 13px;
  color: var(--text-muted);
}

.field {
  margin-bottom: 18px;
}

.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.field input:focus {
  background: var(--panel-bg);
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--border);
}

.input-prefix {
  position: relative;
}

.input-prefix span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-prefix input[type="text"] {
  padding-left: 32px;
}

.field-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.field-error {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #d93036;
}

.field-error:empty {
  display: none;
}

.field.has-error input[type="text"],
.field.has-error input[type="email"],
.field.has-error input[type="tel"] {
  border-color: #d93036;
}

.field.has-error input:focus {
  box-shadow: 0 0 0 3px rgba(217, 48, 54, 0.15);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #1a1a1a;
}

.btn-submit {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.92;
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-submit:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.form-status {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: #d93036;
}

.form-status:empty {
  display: none;
}

/* --- Başarı durumu --- */
.register-success {
  padding: 24px 8px;
  text-align: center;
  outline: none;
}

.register-success[hidden] {
  display: none;
}

.success-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  color: #fff;
  background: linear-gradient(135deg, #0f9c9a, #3aaa48);
  border-radius: 50%;
}

.success-icon svg {
  width: 30px;
  height: 30px;
}

.register-success p {
  max-width: 380px;
  margin: 12px auto 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.register-success p strong {
  color: var(--text);
}

.register-success .btn-primary {
  text-decoration: none;
}

@media (max-width: 900px) {
  .register-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 16px 16px;
  }

  .register-intro {
    padding: 28px 22px 0;
  }

  .register-card {
    padding: 24px 20px;
  }
}

/* Giriş sayfasındaki "Üye ol" bağlantıları */
.nav-register {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition);
}

.nav-register:hover {
  opacity: 0.88;
}

.btn-register {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border-radius: 999px;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}

.btn-register:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.warning-actions {
  justify-content: center;
}

.warning-note {
  opacity: 0.8;
}

@media (max-width: 480px) {
  .nav-register {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* Kayıt formu küçük düzeltmeler */
.field > .check {
  display: flex;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
}

.field.has-error .field-hint {
  display: none;
}

/* --- Plan seçimi (kayıt formu) --- */
.plan-field {
  border: none;
  padding: 0;
  min-width: 0;
}

.plan-field legend {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.plan-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.plan-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.plan-option-body strong {
  font-size: 14px;
  font-weight: 600;
}

.plan-option-body em {
  margin-left: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border-radius: 999px;
  vertical-align: 2px;
}

.plan-price {
  font-size: 13px;
  color: var(--text-muted);
}

.plan-price s {
  margin-right: 4px;
  opacity: 0.7;
}

.plan-option input:checked + .plan-option-body {
  background: var(--panel-bg);
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.plan-option input:focus-visible + .plan-option-body {
  box-shadow: 0 0 0 3px var(--border), 0 0 0 1px var(--text);
}

.plan-field.has-error .plan-option-body {
  border-color: #d93036;
}

/* --- Fiyatlar (ana sayfa) --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.price-card.featured {
  color: #f4f4f2;
  background: #0b0b0e;
  border-color: transparent;
  box-shadow: 0 20px 50px -20px rgba(199, 17, 59, 0.45);
}

.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price-head h3 {
  font-size: 16px;
  font-weight: 600;
}

.price-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--text);
  background: var(--border);
}

.featured .price-badge {
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 20px;
}

.price-old {
  margin-right: 4px;
  font-size: 18px;
  color: var(--text-muted);
}

.price-amount {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.price-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.featured .price-unit,
.featured .price-note,
.featured .price-features li {
  color: rgba(244, 244, 242, 0.75);
}

.price-note {
  min-height: 3em;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.price-features {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.featured .price-features {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.price-features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #3aaa48;
}

.price-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bg);
  background: var(--text);
  border-radius: 999px;
  transition: opacity var(--transition), transform var(--transition);
}

.featured .price-btn {
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
}

.price-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .featured {
    order: -1;
  }
}

/* --- Kayıt sayfası: siyah zemin (koyu tema token'ları + hero siyahı) --- */
.register-page {
  background: #0b0b0e;
}

.register-page .register-intro {
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.register-page .register-card {
  background: #16161a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.register-page .field input[type="text"],
.register-page .field input[type="email"],
.register-page .field input[type="tel"],
.register-page .plan-option-body {
  background: #0f0f12;
  border-color: rgba(255, 255, 255, 0.1);
}

.register-page .field input:focus,
.register-page .plan-option input:checked + .plan-option-body {
  background: #1c1c21;
}

.register-page .check input {
  accent-color: #f2f2f0;
}

.register-page .field-error,
.register-page .form-status {
  color: #ff6b70;
}

.register-page .field.has-error input[type="text"],
.register-page .field.has-error input[type="email"],
.register-page .field.has-error input[type="tel"],
.register-page .plan-field.has-error .plan-option-body {
  border-color: #ff6b70;
}

/* --- Üye alanı: cihaz çerçeveleri --- */
.devices {
  position: relative;
  aspect-ratio: 100 / 58;
  max-width: 960px;
  margin: 36px auto 0;
  perspective: 2400px;
}

/* Zemin gölgesi */
.devices::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: 5%;
  height: 10%;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.28), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

.device {
  position: absolute;
  margin: 0;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
}

.device figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--text-muted);
}

/* Laptop */
.device-laptop {
  left: 0;
  top: 0;
  width: 76%;
  z-index: 1;
}

.laptop-screen {
  padding: 2.4% 2.4% 3%;
  background: #121215;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}

.laptop-screen img {
  border-radius: 3px;
}

.laptop-base {
  position: relative;
  width: 112%;
  margin-left: -6%;
  padding-top: 2.6%;
  background: linear-gradient(to bottom, #e3e3e6, #a7a7ad);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.5);
}

.laptop-base::before {
  /* Menteşe çentiği */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14%;
  height: 40%;
  transform: translateX(-50%);
  background: #b9b9be;
  border-radius: 0 0 8px 8px;
}

/* Ekran yansıması (iPad) */
.tablet-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 32%, transparent 33%);
  pointer-events: none;
}

/* iPad */
.device-tablet {
  right: 0;
  bottom: 0;
  width: 27%;
  z-index: 2;
  /* Sola dönük, laptopla karşılıklı */
  transform: rotateY(-24deg) rotateX(4deg);
  transform-origin: 100% 60%;
}

.tablet-frame {
  position: relative;
  padding: 4.5%;
  background: linear-gradient(200deg, #1d1d22, #0c0c0f 60%);
  border-radius: 9% / 6.5%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 2px #9fa0a6,
    -24px 40px 60px -24px rgba(0, 0, 0, 0.5);
}

.tablet-frame img {
  border-radius: 4% / 2.8%;
}

/* iPhone */
.device-phone {
  left: 60%;
  bottom: 0;
  width: 13.5%;
  z-index: 3;
}

.phone-frame {
  position: relative;
  padding: 5%;
  background: #121215;
  border-radius: 17% / 8%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 2px #9fa0a6,
    0 30px 50px -16px rgba(0, 0, 0, 0.55);
}

.phone-frame::before {
  /* Dynamic Island */
  content: "";
  position: absolute;
  left: 50%;
  top: 3.2%;
  width: 32%;
  height: 2.4%;
  transform: translateX(-50%);
  background: #121215;
  border-radius: 999px;
  z-index: 1;
}

.phone-frame img {
  border-radius: 13% / 6%;
}

.device-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.device-features li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.device-features strong {
  font-size: 15px;
  font-weight: 600;
}

.device-features span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Mobil: üst üste bindirme yerine laptop üstte, tablet + telefon yan yana */
@media (max-width: 640px) {
  .devices {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 24px 16px;
  }

  .device {
    position: static;
  }

  .device-laptop {
    width: 92%;
  }

  .device-tablet {
    width: 48%;
    transform: rotateY(-16deg) rotateX(3deg);
  }

  .device-phone {
    width: 26%;
  }

  .device-features {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Logo
   ============================================ */
.nav-brand img {
  display: block;
  height: 30px;
  width: auto;
}

/* Uygulama başlığı: açık temada koyu yazılı logo, koyu temada beyaz yazılı logo */
.brand .brand-logo {
  line-height: 0;
}

.brand-logo img {
  height: 26px;
  width: auto;
}

.brand-logo .logo-on-dark,
:root[data-theme="dark"] .brand-logo .logo-on-light {
  display: none;
}

:root[data-theme="dark"] .brand-logo .logo-on-dark {
  display: block;
}

/* ============================================
   Footer (koyu bant)
   ============================================ */
.site-footer {
  margin-top: 72px;
  padding: 48px 28px 28px;
  color: rgba(244, 244, 242, 0.7);
  background: #0b0b0e;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.footer-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.footer-brand p {
  margin-top: 12px;
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a,
.footer-bottom a {
  font-size: 14px;
  color: rgba(244, 244, 242, 0.7);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover,
.footer-bottom a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 960px;
  margin: 40px auto 0;
  padding-top: 20px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom a {
  font-size: 13px;
}

/* Kayıt sayfası zaten siyah: footer'ı ince çizgiyle ayır */
.register-page .site-footer {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .site-footer {
    padding: 40px 16px 24px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }
}

/* ============================================
   Görselden renk bulma (uygulama)
   ============================================ */
.image-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition), transform var(--transition);
}

.image-btn svg {
  width: 16px;
  height: 16px;
}

.image-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.image-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* "Görselden" filtresi diğerlerinden ayrışsın */
.filter-chip-image {
  border-color: #fe7300;
}

.filter-chip-image[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border-color: transparent;
}

.image-match {
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--border);
}

.image-match[hidden] {
  display: none;
}

.im-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.im-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--border);
}

.im-thumb:not([src]) {
  visibility: hidden;
}

.im-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.im-title strong {
  font-size: 14px;
  font-weight: 600;
}

.im-title span {
  font-size: 12px;
  color: var(--text-muted);
}

.image-match.loading .im-title span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: im-spin 0.8s linear infinite;
}

@keyframes im-spin {
  to { transform: rotate(360deg); }
}

.im-action {
  height: 32px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--swatch-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.im-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}

.im-close svg {
  width: 14px;
  height: 14px;
}

.im-action:hover,
.im-close:hover {
  border-color: var(--swatch-ring);
  color: var(--text);
}

/* Bulunan renkler: yatay kaydırılabilir kartlar */
.im-colors {
  list-style: none;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.im-colors:empty {
  display: none;
}

.im-colors::-webkit-scrollbar {
  display: none;
}

.im-color {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.im-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.im-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
}

.im-share {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.im-matches {
  display: flex;
  gap: 5px;
}

.im-match {
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.im-match:hover {
  transform: translateY(-1px);
}

.im-match.best {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text-muted);
}

.im-match.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.im-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Sürükle-bırak hedefi */
.swatch-panel.drop-target {
  outline: 3px dashed #fe7300;
  outline-offset: -8px;
}

@media (max-width: 768px) {
  .image-match {
    padding: 10px 16px 12px;
  }
}

@media (max-width: 1100px) {
  /* Tablet ve dar ekranlarda sol panel dar: yalnızca simge */
  .image-btn {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .image-btn span {
    display: none;
  }
}

/* Mobil: görsel sonuçları açıkken renk paneline daha fazla yer ver, kartları sadeleştir */
@media (max-width: 768px) {
  .app.has-image {
    grid-template-rows: 64vh 36vh;
  }

  .has-image .im-head {
    gap: 10px;
  }

  .has-image .im-thumb {
    width: 36px;
    height: 36px;
  }

  .has-image .im-title span {
    display: none;
  }

  .has-image .im-colors {
    margin-top: 10px;
    gap: 8px;
  }

  .has-image .im-color {
    gap: 6px;
    padding: 8px;
  }

  .has-image .im-label {
    display: none;
  }

  .has-image .im-dot {
    width: 18px;
    height: 18px;
  }

  .has-image .im-match {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
}

/* Üye alanı: öne çıkan özellik kartı (Görselden renk bul) */
.device-features .feature-highlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 32px;
  color: #f4f4f2;
  background: #0b0b0e;
  border-color: transparent;
  box-shadow: 0 18px 40px -26px rgba(199, 17, 59, 0.5);
}

.device-features .feature-highlight::before {
  /* Hero ile aynı dilden yumuşak renk ışıkları */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 70% at 0% 0%, rgba(254, 115, 0, 0.28), transparent 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(199, 17, 59, 0.3), transparent 70%);
}

.fh-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fh-badge {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #fe7300, #c7113b);
  border-radius: 999px;
}

.device-features .feature-highlight strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fe9a3c, #ff5a8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.device-features .feature-highlight .fh-text > span:not(.fh-badge) {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 244, 242, 0.82);
}

.fh-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 244, 242, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.fh-privacy svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #3aaa48;
}

/* Mini çizim */
.fh-demo {
  display: grid;
  gap: 12px;
  justify-self: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.fh-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fh-src {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.fh-arrow {
  margin: 0 4px;
  color: rgba(244, 244, 242, 0.5);
}

.fh-chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1a1a1a;
  background: var(--c);
  border-radius: 9px;
}

.fh-chip.light {
  color: #fff;
}

.fh-chip.best {
  box-shadow: 0 0 0 2px #0b0b0e, 0 0 0 4px rgba(255, 255, 255, 0.85);
}

@media (max-width: 760px) {
  .device-features .feature-highlight {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .fh-demo {
    justify-self: stretch;
    justify-content: center;
  }
}

/* Genel kart açıklama stili (.device-features span) bu öğeleri ezmesin */
.device-features .fh-badge {
  font-size: 11px;
  color: #fff;
}

.device-features .fh-chip {
  font-size: 12px;
  color: #1a1a1a;
}

.device-features .fh-chip.light {
  color: #fff;
}

.device-features .fh-arrow {
  font-size: 14px;
  color: rgba(244, 244, 242, 0.5);
}

/* Bot tuzağı alanı: ekranda ve ekran okuyucularda görünmez */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kayıt formu: kod yüklenene kadar gösterilen not */
.form-loading {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
}

/* Kod 8 sn içinde yüklenmezse uyarı görünür (yalnızca CSS, JS gerektirmez) */
.form-slow {
  opacity: 0;
  animation: form-slow-in 0.3s 8s forwards;
}

@keyframes form-slow-in {
  to { opacity: 1; }
}