/* app-styles.css — ARCH-01: Extracted from index.html inline <style> block */

    *, *::before, *::after { box-sizing: border-box; }
    /* Sayfa zemini: body arkaplanı (bg-amber-50/30) %30 SAYDAM. İşletim sistemi
       karanlık moddayken tarayıcının varsayılan sayfa zemini koyu olur ve bu
       saydam açık katmanın altından sızarak arkaplanı GRİ gösterir. html'e solid
       zemin vererek açık modun her OS ayarında açık, karanlık modun koyu kalmasını
       garanti ederiz. color-scheme de tarayıcı varsayılan zeminini hizalar. */
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: #fffdf9; color-scheme: light; }
    html.dark { background-color: #0f172a; color-scheme: dark; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
      -webkit-tap-highlight-color: transparent;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    .serif-text { font-family: 'Lora', serif; }
    .title-font { font-family: 'Cinzel', serif; }
    .fade-in { animation: fadeIn 0.4s ease-out forwards; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .slide-in { animation: slideIn 0.3s ease-out forwards; }
    @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
    .slide-down { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
    .vocab-highlight {
      text-decoration: underline dotted;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
      text-decoration-color: #0f766e;
      border-bottom: none;
      background-color: rgba(20, 184, 166, 0.08);
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 700;
    }
    .vocab-highlight:hover { background-color: rgba(20, 184, 166, 0.2); color: #0f766e; }
    .level-card { transition: all 0.3s ease; }
    .level-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15); }
    .story-card { transition: all 0.3s ease; }
    .story-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -4px rgba(0,0,0,0.1); }
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
    .pulse-audio { animation: pulseAudio 1.5s ease-in-out infinite; }
    @keyframes pulseAudio { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    .quiz-option { transition: all 0.2s ease; }
    .quiz-option:hover { transform: scale(1.01); }
    .view { display: none; }
    .view.active { display: block; }

    /* Touch-friendly targets */
    button, a, [onclick] { touch-action: manipulation; }
    .touch-target { min-height: 44px; min-width: 44px; }

    /* Tab nav scrollable on mobile */
    .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tab-nav::-webkit-scrollbar { display: none; }

    /* Responsive spacing */
    @media (max-width: 640px) {
      .mobile-compact { gap: 0.75rem !important; }
      .mobile-compact > * + * { margin-top: 0.5rem; }
    }

    /* Smooth page transitions */
    .tab-content { animation: fadeIn 0.25s ease-out; }

    /* Safe area for notch devices */
    @supports (padding: env(safe-area-inset-top)) {
      .safe-top { padding-top: env(safe-area-inset-top); }
      .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
    }

    /* Vocab Type Colors */
    .vocab-type-f { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    .vocab-type-n { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .vocab-type-m { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
    .vocab-type-verb { background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc; }
    .vocab-type-modal { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
    .vocab-type-adj { background: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
    .vocab-type-konj { background: #f0fdfa; color: #115e59; border: 1px solid #99f6e4; }
    .vocab-type-prae { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
    .vocab-type-rel { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
    .vocab-type-det { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .vocab-type-other { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

    .vocab-card-f { background: #fef2f2; border-color: #fecaca; }
    .vocab-card-f:hover { background: #fee2e2; border-color: #fca5a5; }
    .vocab-card-n { background: #f0fdf4; border-color: #bbf7d0; }
    .vocab-card-n:hover { background: #dcfce7; border-color: #86efac; }
    .vocab-card-m { background: #eff6ff; border-color: #bfdbfe; }
    .vocab-card-m:hover { background: #dbeafe; border-color: #93c5fd; }
    .vocab-card-verb { background: #ecfeff; border-color: #a5f3fc; }
    .vocab-card-verb:hover { background: #cffafe; border-color: #67e8f9; }
    .vocab-card-modal { background: #fff7ed; border-color: #fed7aa; }
    .vocab-card-modal:hover { background: #ffedd5; border-color: #fdba74; }
    .vocab-card-adj { background: #faf5ff; border-color: #e9d5ff; }
    .vocab-card-adj:hover { background: #f3e8ff; border-color: #d8b4fe; }
    .vocab-card-konj { background: #f0fdfa; border-color: #99f6e4; }
    .vocab-card-konj:hover { background: #ccfbf1; border-color: #5eead4; }
    .vocab-card-prae { background: #fdf2f8; border-color: #fbcfe8; }
    .vocab-card-prae:hover { background: #fce7f3; border-color: #f9a8d4; }
    .vocab-card-rel { background: #f5f3ff; border-color: #ddd6fe; }
    .vocab-card-rel:hover { background: #ede9fe; border-color: #c4b5fd; }
    .vocab-card-det { background: #ecfdf5; border-color: #a7f3d0; }
    .vocab-card-det:hover { background: #d1fae5; border-color: #6ee7b7; }
    .vocab-card-other { background: #f8fafc; border-color: #e2e8f0; }
    .vocab-card-other:hover { background: #f1f5f9; border-color: #cbd5e1; }
  
    /* Dark Mode Vocab Type Badges */
    .dark .vocab-type-f { background: #b91c1c; color: #fef2f2; border-color: #ef4444; }
    .dark .vocab-type-n { background: #15803d; color: #f0fdf4; border-color: #22c55e; }
    .dark .vocab-type-m { background: #1d4ed8; color: #eff6ff; border-color: #3b82f6; }
    .dark .vocab-type-verb { background: #0e7490; color: #ecfeff; border-color: #06b6d4; }
    .dark .vocab-type-modal { background: #c2410c; color: #fff7ed; border-color: #f97316; }
    .dark .vocab-type-adj { background: #7e22ce; color: #faf5ff; border-color: #a855f7; }
    .dark .vocab-type-konj { background: #0f766e; color: #f0fdfa; border-color: #14b8a6; }
    .dark .vocab-type-prae { background: #be185d; color: #fdf2f8; border-color: #ec4899; }
    .dark .vocab-type-rel { background: #6d28d9; color: #f5f3ff; border-color: #8b5cf6; }
    .dark .vocab-type-det { background: #047857; color: #ecfdf5; border-color: #10b981; }
    .dark .vocab-type-other { background: #475569; color: #f8fafc; border-color: #64748b; }

    /* Dark Mode Vocab Cards */
    .dark .vocab-card-f { background: #450a0a; border-color: #7f1d1d; }
    .dark .vocab-card-f:hover { background: #7f1d1d; border-color: #991b1b; }
    .dark .vocab-card-n { background: #052e16; border-color: #14532d; }
    .dark .vocab-card-n:hover { background: #14532d; border-color: #15803d; }
    .dark .vocab-card-m { background: #172554; border-color: #1e3a5f; }
    .dark .vocab-card-m:hover { background: #1e3a5f; border-color: #1d4ed8; }
    .dark .vocab-card-verb { background: #083344; border-color: #155e75; }
    .dark .vocab-card-verb:hover { background: #155e75; border-color: #0e7490; }
    .dark .vocab-card-adj { background: #3b0764; border-color: #581c87; }
    .dark .vocab-card-adj:hover { background: #581c87; border-color: #7e22ce; }
    .dark .vocab-card-modal { background: #431407; border-color: #7c2d12; }
    .dark .vocab-card-modal:hover { background: #7c2d12; border-color: #c2410c; }
    .dark .vocab-card-konj { background: #134e4a; border-color: #115e59; }
    .dark .vocab-card-konj:hover { background: #115e59; border-color: #0f766e; }
    .dark .vocab-card-prae { background: #4c0519; border-color: #831843; }
    .dark .vocab-card-prae:hover { background: #831843; border-color: #be185d; }
    .dark .vocab-card-rel { background: #2e1065; border-color: #4c1d95; }
    .dark .vocab-card-rel:hover { background: #4c1d95; border-color: #6d28d9; }
    .dark .vocab-card-det { background: #022c22; border-color: #064e3b; }
    .dark .vocab-card-det:hover { background: #064e3b; border-color: #047857; }
    .dark .vocab-card-other { background: #171717; border-color: #262626; }
    .dark .vocab-card-other:hover { background: #262626; border-color: #3f3f46; }

    /* B2 stories: full width text */
    #detail-text-container.b2-full-width { grid-column: 1 / -1 !important; }

    /* Accessibility (a11y) */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
    .focus-visible:focus {
      outline: 3px solid #0d9488;
      outline-offset: 2px;
      border-radius: 4px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    /* color-scheme artık html/html.dark üzerinden (üstte) yönetilir — OS'a bağlı
       :root kuralı kaldırıldı; app açık moddayken tarayıcı zeminini koyu yapıp
       griliğe yol açıyordu. */

    /* ===== İÇERİK KORUMASI: kopyalama / seçim / sürükleme engelleme ===== */
    html, body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none; /* iOS uzun-bas menüsünü/görsel kaydetmeyi engeller */
    }
    /* Form alanları yazılabilir/seçilebilir kalmalı (arama, e-posta, hata açıklaması) */
    input, textarea, select, [contenteditable="true"] {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }
    /* Görseller: sürükleme ve uzun-bas-kaydet engeli */
    img {
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
      -webkit-touch-callout: none;
      pointer-events: none; /* tıklama üst (buton) öğeye geçer; görselin kendisi seçilemez/kaydedilemez */
    }
    /* Yazdırma / PDF'e kaydetme (bir kopyalama vektörü) engellenir */
    @media print {
      html, body { display: none !important; }
    }


    /* Artikel renkleri — uluslararası DaF standardı (der=mavi, die=kırmızı, das=yeşil) */
    .artikel-m { color: #1d4ed8; font-weight: 700; }
    .artikel-f { color: #dc2626; font-weight: 700; }
    .artikel-n { color: #16a34a; font-weight: 700; }
    .dark .artikel-m { color: #60a5fa; }
    .dark .artikel-f { color: #f87171; }
    .dark .artikel-n { color: #4ade80; }