/* ===== Tema: Editorial + Petrol / Gold / Kırmızı ===== */
:root {
  --petrol: #0e5a6b;
  --petrol-light: #e6eff1;
  --gold: #c8a04e;
  --red: #c0392b;
  --ink: #1f2937;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  scroll-behavior: smooth;
  color: var(--ink);
  /* İnce damalı (grid) arka plan dokusu — petrol çizgiler */
  background-color: #fbfaf7;
  background-image:
    linear-gradient(rgba(14,90,107,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,90,107,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  background-attachment: fixed;
}

.editorial { font-family: 'Playfair Display', serif; }

/* Renk yardımcıları */
.petrol { color: var(--petrol); }
.petrol-bg { background: var(--petrol); }
.gold { color: var(--gold); }
.gold-bg { background: var(--gold); }
.red-acc { color: var(--red); }
.red-acc-bg { background: var(--red); }

.fade-in { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(14,90,107,.14); }

/* Kartlara hafif üst gold/petrol çizgi hissi */
.app-card { background:#fff; border:1px solid #ecebe5; }

/* Flashcard flip */
.flashcard { perspective: 1000px; }
.flashcard-inner { transition: transform .5s; transform-style: preserve-3d; position: relative; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face, .flashcard-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.flashcard-back { transform: rotateY(180deg); }

.pulse-correct { animation: pulseGreen .5s; }
.pulse-wrong { animation: shake .4s; }
@keyframes pulseGreen { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }