/* Performans: animations.css + typography.css bu dosyaya gomuldu - @import zinciri render'i bloke ediyordu */

/* ===== SELIS Premium Animations ===== */

@keyframes selis-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes selis-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes selis-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes selis-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* box-shadow yerine transform+opacity: compositor'da (GPU) çalışır, ana thread'i yormaz */
@keyframes selis-wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Utility classes */
.animate-selis-fade-in { animation: selis-fade-in 0.3s cubic-bezier(0, 0, 0.2, 1) forwards; }
.animate-selis-fade-in-up { animation: selis-fade-in-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-selis-scale-in { animation: selis-scale-in 0.2s cubic-bezier(0, 0, 0.2, 1) forwards; }
.animate-selis-spin { animation: selis-spin 0.8s linear infinite; }
.animate-selis-wa-pulse { position: relative; }
.animate-selis-wa-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(37, 211, 102, 0.5);
  z-index: -1;
  animation: selis-wa-pulse 2s ease-out infinite;
}
.animate-blink { animation: blink 1.1s step-end infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-slide-in-up { animation: slideInUp 0.5s ease-out forwards; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ===== SELIS Typography System ===== */

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.font-playfair { font-family: var(--font-playfair, 'Playfair Display', Georgia, serif); }

/* Display sizes */
.text-display-xl {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.text-display-lg {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.text-section-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--color-warm-gray);
}

/* Body text */
.text-body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; }
.text-body-sm { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; }
.text-body-xs { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5; }

/* Labels */
.text-label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.text-price {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-price-old {
  text-decoration: line-through;
  color: var(--muted-foreground);
  font-weight: 400;
}

/* Link styles */
.link-gold {
  color: var(--selis-gold, #C9A96E);
  text-decoration: none;
  transition: color 0.3s;
}
.link-gold:hover { color: var(--selis-gold-dark, #B8915A); }

.link-underline {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.link-underline:hover { border-bottom-color: var(--selis-gold, #C9A96E); }


/* ===== Premium Furniture E-Commerce Design System ===== */

:root {
  /* Shadcn mappings */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Font families */
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Premium custom colors */
  --color-sand: #FAF8F5;
  --color-sand-dark: #F3EDE7;
  --color-warm-gray: #6B6560;
  --color-warm-gray-light: #9C9590;
  --color-gold: #C4A265;
  --color-gold-dark: #A8893F;
  --color-terracotta: #C67D5B;
  --color-sage: #8B9E82;
  --color-sage-dark: #6E8264;
  --color-wood: #8B6F4E;
  --color-cream: #F5F0EB;
  --color-linen: #EDE8E1;
  --color-charcoal: #1A1A1A;

  /* Radius */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* SELIS Design System Tokens */
  --color-selis-primary-50: #F7F7F7;
  --color-selis-primary-100: #E8E8E8;
  --color-selis-primary-200: #D4D4D4;
  --color-selis-primary-300: #ABABAB;
  --color-selis-primary-400: #737373;
  --color-selis-primary-500: #525252;
  --color-selis-primary-600: #404040;
  --color-selis-primary-700: #2C2C2E;
  --color-selis-primary-800: #1C1C1E;
  --color-selis-primary-900: #0D0D0F;
  --color-selis-primary: #1C1C1E;

  --color-selis-accent-50: #FDF9F0;
  --color-selis-accent-100: #FAF0D9;
  --color-selis-accent-200: #F3DFB0;
  --color-selis-accent-300: #E8C97A;
  --color-selis-accent-400: #D4AA6E;
  --color-selis-accent-500: #C9A96E;
  --color-selis-accent-600: #B8915A;
  --color-selis-accent-700: #9A7440;
  --color-selis-accent-800: #7A5A2C;
  --color-selis-accent-900: #5C4020;
  --color-selis-accent: #C9A96E;

  --color-selis-secondary-50: #FDFCFA;
  --color-selis-secondary-100: #FAF8F5;
  --color-selis-secondary-200: #F5F0EB;
  --color-selis-secondary-300: #EDE5DC;
  --color-selis-secondary-400: #E2D5C8;
  --color-selis-secondary-500: #D4C4B0;
  --color-selis-secondary-600: #C0AB91;
  --color-selis-secondary-700: #A08B6E;
  --color-selis-secondary-800: #7D6A50;
  --color-selis-secondary-900: #5A4C38;
  --color-selis-secondary: #F5F0EB;

  --color-selis-success: #4CAF50;
  --color-selis-success-light: #F0FFF4;
  --color-selis-error: #E53935;
  --color-selis-error-light: #FFF5F5;
  --color-selis-warning: #FF9800;
  --color-selis-warning-light: #FFFBF0;
  --color-selis-info: #3B82F6;
  --color-selis-info-light: #EFF6FF;

  --color-selis-whatsapp: #25D366;
  --color-selis-instagram: #E1306C;

  /* Shadows */
  --shadow-selis-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-selis-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-selis-navbar: 0 1px 20px rgba(0, 0, 0, 0.08);
  --shadow-selis-drawer: -4px 0 40px rgba(0, 0, 0, 0.12);
  --shadow-selis-bottom-nav: 0 -4px 20px rgba(0, 0, 0, 0.06);
  --shadow-selis-gold: 0 8px 24px rgba(201, 169, 110, 0.35);
  --shadow-selis-gold-sm: 0 4px 12px rgba(201, 169, 110, 0.25);
  --shadow-selis-toast: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-selis-glass: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);

  --radius-selis: 2px;
  --breakpoint-xs: 375px;
  --breakpoint-2xl: 1440px;

  /* Admin Dashboard */
  --color-admin-sidebar: #0F0F10;
  --color-admin-bg: #141416;
  --color-admin-card: #1C1C1E;
  --color-admin-card-hover: #242426;
  --color-admin-border: rgba(255, 255, 255, 0.06);
  --color-admin-border-accent: rgba(201, 169, 110, 0.3);
  --color-admin-gold: #C9A96E;
  --color-admin-gold-hover: #D4B87A;
  --color-admin-gold-dim: rgba(201, 169, 110, 0.15);
  --color-admin-text-primary: #F5F0EB;
  --color-admin-text-secondary: #AEAEB2;
  --color-admin-text-dim: #636366;
  --color-admin-success: #30D158;
  --color-admin-error: #FF453A;
  --color-admin-warning: #FFD60A;
  --color-admin-info: #0A84FF;

  /* Light mode */
  --background: #FFFFFF;
  --foreground: #1A1A1A;
  --card: #FFFFFF;
  --card-foreground: #1A1A1A;
  --popover: #FFFFFF;
  --popover-foreground: #1A1A1A;
  --primary: #C4A265;
  --primary-foreground: #FFFFFF;
  --secondary: #FAF8F5;
  --secondary-foreground: #1A1A1A;
  --muted: #F3EDE7;
  --muted-foreground: #6B6560;
  --accent: #F3EDE7;
  --accent-foreground: #1A1A1A;
  --destructive: #dc2626;
  --border: #E8E2DB;
  --input: #E8E2DB;
  --ring: #C4A265;

  --selis-primary: #1C1C1E;
  --selis-gold: #C9A96E;
  --selis-gold-dark: #B8915A;
  --selis-cream: #F5F0EB;

  --color-accent: #BD8C40;
  --color-accent-hover: #A17336;
  --color-primary-dark: #0A0A0B;
  --color-success: #4CAF50;
  --color-error: #E53935;
  --color-warning: #FF9800;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-playfair: 'Playfair Display', Georgia, serif;

  --navbar-height: 72px;
  --bottom-nav-height: 64px;
  --container-max: 1280px;
  --container-pad: 24px;
  --container-pad-mobile: 16px;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(20px) saturate(180%);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Dark Mode */
.dark {
  --background: #09090B;
  --foreground: #FCFBF7;
  --card: #121212;
  --card-foreground: #FCFBF7;
  --popover: #121212;
  --popover-foreground: #FCFBF7;
  --primary: #C9A96E;
  --primary-foreground: #09090B;
  --secondary: #18181B;
  --secondary-foreground: #FCFBF7;
  --muted: #27272A;
  --muted-foreground: #A1A1AA;
  --accent: #27272A;
  --accent-foreground: #FCFBF7;
  --destructive: #dc2626;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.08);
  --ring: #C9A96E;
  --selis-primary: #FCFBF7;
  --selis-gold: #C9A96E;
  --selis-gold-dark: #B8915A;
  --selis-cream: #121212;
  --glass-bg: rgba(9, 9, 11, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(30px) saturate(220%);
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: color 0.3s, background-color 0.3s;
}

/* Layout wrapper fills remaining height so footer sticks to bottom */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-wrapper > main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Premium text styles */
.text-display {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
}

.text-body-lg {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-warm-gray);
}

/* Container */
.container-premium {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .container-premium { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1280px) {
  .container-premium { padding-left: 5rem; padding-right: 5rem; }
}

/* Glass */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.glass-premium {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.dark .glass-premium {
  background: rgba(13, 13, 15, 0.88);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Fade animations */
.fade-in-up { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* Scrollbar */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #E8E3DC 0%, #F5F0EB 40%, #E8E3DC 80%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
}
.dark .skeleton {
  background: linear-gradient(90deg, #2C2C2E 0%, #3A3A3C 40%, #2C2C2E 80%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F5F0EB; }
::-webkit-scrollbar-thumb { background: #C9A96E; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B8915A; }
.dark ::-webkit-scrollbar-track { background: #2C2C2E; }
.dark ::-webkit-scrollbar-thumb { background: #9A7440; }

/* Text selection */
::selection { background-color: rgba(201, 169, 110, 0.25); color: #1C1C1E; }
.dark ::selection { background-color: rgba(201, 169, 110, 0.30); color: #F5F0EB; }

/* Focus */
:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }

/* Touch scrolling */
.touch-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Heritage Material for navbar */
.heritage-material {
  background: rgba(252, 251, 247, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 213, 188, 0.30);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
.dark .heritage-material {
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.20);
}

/* Image crossfade */
.img-crossfade { position: relative; overflow: hidden; }
.img-crossfade img:last-child { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.img-crossfade:hover img:last-child { opacity: 1; }

/* Keyframes */
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes videoRing { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }

/* ═══ Erişilebilirlik (WCAG AA 4.5:1): açık zeminde kucuk altin/gri metinler
   koyulastirildi. Dark modda orijinal tonlar korunur. ═══ */
/* #7A6340: beyazda 5.7:1, krem (#FAF8F5) zeminde 5.4:1 — #8B6F47 kremde
   4.44:1 kaliyordu (AA siniri 4.5). */
html:not(.dark) .text-\[\#C9A96E\] { color: #7A6340; }
html:not(.dark) .text-\[\#6B6560\] { color: #575049; }
/* Footer HER ZAMAN koyu (#0D0D0F) — koyulastirma orada kontrasti dusurur,
   orijinal altin geri gelir (koyu zeminde 9.4:1). */
html:not(.dark) footer .text-\[\#C9A96E\] { color: #C9A96E; }

/* ═══════════════════════════════════════════════════════════════
   Blog yazısı içindeki bağlantılar (Ceyhun, 22.08.2026)
   Sorun: yazı içindeki linkler gövde metniyle neredeyse aynı renkteydi,
   tıklanabilir olduğu anlaşılmıyordu. Tailwind Typography'nin varsayılan
   "prose-a" rengi koyu gri; burada ezip altın-kahve tona + kalıcı alt
   çizgiye çeviriyoruz. Kontrast: #8A6410 / #FAF8F5 ≈ 5,6:1 (WCAG AA).
   ═══════════════════════════════════════════════════════════════ */
.prose a {
    color: #8A6410;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, .55);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.prose a:hover,
.prose a:focus-visible {
    color: #6B4E0C;
    text-decoration-color: #8A6410;
}

.dark .prose a {
    color: #E0C089;
    text-decoration-color: rgba(224, 192, 137, .5);
}

.dark .prose a:hover,
.dark .prose a:focus-visible {
    color: #F0DCB4;
    text-decoration-color: #E0C089;
}

/* Başlık içindeki bağlantı (nadir) gövdeyle aynı dili konuşsun. */
.prose h2 a,
.prose h3 a {
    text-decoration-thickness: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Yazı tipografisi — .prose (27.08.2026)

   NEDEN VAR: Ceyhun "57 blog okunaklı değil, bazı yerlerde tablolar
   birbirine girmiş" dedi. Sebebi bulundu: `prose` sınıfı Tailwind
   Typography eklentisinden geliyor ama eklenti derlemede HİÇ YOK —
   `grep -c prose public/css/tailwind-public.min.css` → 0. Yani blog,
   SSS, kargo, iade, garanti gibi 12 metin sayfası bugüne kadar
   TAMAMEN STİLSİZ basılıyordu: paragraf aralığı yok, başlık boyutu
   yok, liste işareti yok, tablo çizgisi yok. 49 blog yazısında tablo
   var ve hepsi çerçevesiz, hücreler birbirine yapışık geliyordu.

   Eklentiyi kurup derleme zincirini değiştirmek yerine ihtiyacımız
   olan kadarı elle yazıldı: derleme adımı yok, tek dosya, ölçülebilir.

   ⚠️ Bu blok 12 sayfayı birden etkiler (blog + kurumsal metinler).
   Değiştirirken yalnız bloga bakma.
   ═══════════════════════════════════════════════════════════════ */

.prose {
    color: #4A4540;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.dark .prose { color: #B4B4BB; }

.prose > * + * { margin-top: 1.25em; }

/* ── Başlıklar ──────────────────────────────────────────────────
   Ara başlık kendinden ÖNCEKİ boşluğu sonrakinden büyük alır; göz
   böylece bölümün nerede başladığını okumadan anlar. */
.prose h2,
.prose h3,
.prose h4 {
    color: #1C1C1E;
    font-family: 'Cormorant Garamond', var(--font-playfair, serif);
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

.dark .prose h2,
.dark .prose h3,
.dark .prose h4 { color: #F5F0EB; }

.prose h2 {
    margin-top: 2.5em;
    margin-bottom: .75em;
    font-size: 1.875rem;
    padding-bottom: .3em;
    border-bottom: 1px solid #E8E2DB;
}

.dark .prose h2 { border-bottom-color: rgba(255, 255, 255, .1); }

.prose h3 { margin-top: 2em;   margin-bottom: .6em;  font-size: 1.4rem; }
.prose h4 { margin-top: 1.6em; margin-bottom: .5em;  font-size: 1.15rem; }

.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose strong { color: #1C1C1E; font-weight: 600; }
.dark .prose strong { color: #FFFFFF; }

/* ── Listeler ───────────────────────────────────────────────────
   İşaretsiz liste, sıralı adımdan farklı görünmeli. */
.prose ul,
.prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; padding-left: .25em; }
.prose li::marker { color: #C9A96E; }
.prose li > ul,
.prose li > ol { margin-top: .5em; }

/* ── Tablo ──────────────────────────────────────────────────────
   Ölçü rehberlerinin can damarı: 49 yazıda tablo var ve en çok
   gösterim alan aramalar ("1,5 kişilik yatak kaç cm", "45 inç tv
   ölçüleri") cevabını tam da bu tablolardan alıyor.

   Mobil: tablo daraltılmaz, YATAY KAYDIRILIR (.blog-tablo sarmalı,
   App\Support\BlogIcerik ekliyor). Daraltmak 4 sütunlu ölçü
   tablosunda hücreleri üst üste bindiriyordu — Ceyhun'un
   "birbirine girmiş" dediği şey buydu. */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    line-height: 1.55;
}

.prose thead th,
.prose tr:first-child th {
    background: #F5F0EB;
    color: #1C1C1E;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.dark .prose thead th,
.dark .prose tr:first-child th { background: #26262A; color: #F5F0EB; }

.prose th,
.prose td {
    padding: .7em .9em;
    border: 1px solid #E8E2DB;
    vertical-align: top;
}

.dark .prose th,
.dark .prose td { border-color: rgba(255, 255, 255, .12); }

/* Zebra: satır kaymasını önler, uzun ölçü tablolarında göz kaybolmaz. */
.prose tbody tr:nth-child(even),
.prose tr:nth-child(even) { background: rgba(245, 240, 235, .45); }

.dark .prose tbody tr:nth-child(even),
.dark .prose tr:nth-child(even) { background: rgba(255, 255, 255, .03); }

/* İlk sütun (ölçü/parça adı) satırın kimliği — sarmasın. */
.prose td:first-child { font-weight: 500; color: #1C1C1E; }
.dark .prose td:first-child { color: #EDEDED; }

/* Tabloyu saran kaydırma kutusu. */
.blog-tablo {
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    overflow-x: auto;
    border-radius: .75rem;
    border: 1px solid #E8E2DB;
    -webkit-overflow-scrolling: touch;
}

.dark .blog-tablo { border-color: rgba(255, 255, 255, .12); }

/* Sarmal zaten çerçeve çiziyor; içerideki tablo dış kenarını tekrarlamasın. */
.blog-tablo > table { margin: 0; }
.blog-tablo > table th:first-child,
.blog-tablo > table td:first-child { border-left: 0; }
.blog-tablo > table th:last-child,
.blog-tablo > table td:last-child { border-right: 0; }
.blog-tablo > table tr:first-child th,
.blog-tablo > table tr:first-child td { border-top: 0; }
.blog-tablo > table tr:last-child td { border-bottom: 0; }

/* "Kaydırılabilir" olduğunu söyleyen ipucu — yalnız dokunmatikte. */
.blog-tablo-ipucu {
    display: none;
    margin-top: -1.35em;
    margin-bottom: 1.75em;
    font-size: .75rem;
    color: #9C9590;
}

@media (max-width: 640px) {
    .blog-tablo-ipucu { display: block; }
    .prose table { font-size: .875rem; }
    .prose th,
    .prose td { padding: .55em .7em; }
    .prose h2 { font-size: 1.6rem; }
    .prose h3 { font-size: 1.25rem; }
}

/* ── Görsel ─────────────────────────────────────────────────────
   27.08.2026'ya kadar yazıların hiçbirinde metin içi görsel yoktu. */
.prose figure { margin-top: 2em; margin-bottom: 2em; }

.prose figure img,
.prose > img {
    width: 100%;
    height: auto;
    border-radius: .75rem;
    display: block;
}

.prose figcaption {
    margin-top: .7em;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6B6560;
    text-align: center;
}

.dark .prose figcaption { color: #9C9590; }

/* ── Alıntı ve öne çıkan kutu ───────────────────────────────────── */
.prose blockquote {
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    padding: .25em 0 .25em 1.25em;
    border-left: 3px solid #C9A96E;
    font-style: italic;
    color: #575049;
}

.dark .prose blockquote { color: #B4B4BB; }

.prose hr {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    border: 0;
    border-top: 1px solid #E8E2DB;
}

.dark .prose hr { border-top-color: rgba(255, 255, 255, .1); }

/* ── SSS bölümü ─────────────────────────────────────────────────
   İçerikteki <section class="blog-faq"> bloğu; FAQPage şeması da
   buradan okunuyor (PageController::extractFaqItems). Soru-cevap
   listesi gövde metninden görsel olarak ayrılsın. */
.prose .blog-faq {
    margin-top: 3em;
    padding: 1.75em;
    background: #FAF8F5;
    border: 1px solid #E8E2DB;
    border-radius: 1rem;
}

.dark .prose .blog-faq {
    background: rgba(255, 255, 255, .025);
    border-color: rgba(255, 255, 255, .1);
}

.prose .blog-faq h3 {
    margin-top: 1.5em;
    font-size: 1.0625rem;
    font-family: inherit;
    font-weight: 600;
}

.prose .blog-faq h3:first-of-type { margin-top: 0; }
.prose .blog-faq p { margin-top: .5em; }

/* ═══════════════════════════════════════════════════════════════
   Ürün kartındaki gizli eylem düğmeleri — DOKUNMATİKTE KAPALI
   (27.08.2026)

   NEDEN VAR: Ceyhun'un tespiti — "telefondan ürünün içine girmek çok zor,
   sepete ekliyor; kimse telefonda fotoğrafını tam görmediği bir ürünü
   sepete eklemez."

   Kart üstündeki "Sepete Ekle" ve "Favoriye Ekle" düğmeleri
   `opacity-0 group-hover:opacity-100` ile duruyor: fareyle gelince
   görünsün diye. Dokunmatikte hover diye bir şey yok — mobil tarayıcılar
   İLK DOKUNUŞU hover sayıyor ("yapışkan hover"). Sonuç: müşteri karta
   basıyor, düğmeler beliriyor; ikinci dokunuş ürün sayfasını açmak yerine
   sepete ekliyor. "Sepete Ekle" düğmesi kartın alt kenarında tam genişlikte
   duruyor, yani kazara basılması çok kolay.

   Bu, ölçümü de bozuyordu: 8 günde 54 "sepete ekleme" göründü ama sipariş
   sıfırdı ve kimse sepet sayfasına gitmedi — sayının bir kısmı kazara
   dokunuş.

   Çözüm: düğmeler yalnız GERÇEKTEN hover'ı olan cihazda basılır. Mobilde
   kartın tamamı tek işe yarar: ürün sayfasını açmak. Sepete ekleme zaten
   ürün sayfasında, fotoğrafları gördükten sonra yapılır — doğru sıra da bu.

   ⚠️ `display:none` kullanılıyor, `opacity` değil: saydam düğme yine
   dokunuşu yakalar, asıl sorun çözülmez.
   ═══════════════════════════════════════════════════════════════ */

@media (hover: none), (pointer: coarse) {
    .urun-kart-eylem { display: none !important; }
}