/* assets/css/tema.css — ihbarhatti.net teması (Aurora Cam)
 *
 * Renkler RGB üçlüsü olarak tanımlanır; header.php'deki Tailwind ayarı bunları
 * rgb(var(--x) / <alpha-value>) şeklinde kullanır. Böylece bg-wa/10 gibi saydamlıklar da çalışır.
 *   --wa*      : WhatsApp aksiyon rengi (butonlar)
 *   --p-*      : vurgu (primary) skalası
 *   --g-*      : nötr (gray) skalası
 *   --ink-*    : koyu mod yüzeyleri
 *   --zemin    : sayfa arka planı
 *   --yuzey    : kart/panel arka planı
 *   --cizgi    : kenarlık rengi
 * Semantik sınıflar: .kart .panel .etiket .btn-wa .hero-baslik .vurgu-yazi .kayan-bant .mobil-nav
 */

/* ========================================================= ORTAK */
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--f-sans);
  background: rgb(var(--zemin));
  color: rgb(var(--metin));
}
h1, h2, h3, .font-display { font-family: var(--f-display); }
.font-mono { font-family: var(--f-mono); }
::selection { background: rgb(var(--p-500) / .3); }
:focus-visible { outline: 2px solid rgb(var(--p-500)); outline-offset: 2px; }

.kart, .panel { background: rgb(var(--yuzey)); border: 1px solid rgb(var(--cizgi)); }
.glass { background: rgb(var(--yuzey) / .6); border: 1px solid rgb(var(--cizgi)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Kayan bant (marquee) */
.kayan-bant { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kayan-bant > div { display: inline-flex; gap: .75rem; padding-right: .75rem; animation: kay 38s linear infinite; }
.kayan-bant:hover > div { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }

/* Kaydırınca beliren öğeler */
.gorun { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.gorun.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gorun { opacity: 1; transform: none; transition: none; }
  .kayan-bant > div, .aurora-bulut { animation: none !important; }
}

/* Eski .reveal sınıfı (geri uyumluluk) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Mobil alt menü: içerik altında boşluk bırak */
@media (max-width: 639px) { body { padding-bottom: 76px; } }
.mobil-nav { background: rgb(var(--yuzey) / .85); border-top: 1px solid rgb(var(--cizgi)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-bottom: env(safe-area-inset-bottom); }
.mobil-nav a[aria-current="page"] { color: rgb(var(--p-600)); }
.dark .mobil-nav a[aria-current="page"] { color: rgb(var(--p-400)); }

/* Onay kutuları: tüm temalarda görünür, büyük dokunma alanı */
.onay-kutu { appearance: auto; width: 1.25rem; height: 1.25rem; accent-color: rgb(var(--wa)); flex-shrink: 0; cursor: pointer; margin-top: .125rem; }

/* Kurum kartı monogramı (logo yoksa) */
.monogram { font-family: var(--f-display); background: linear-gradient(135deg, rgb(var(--p-500) / .18), rgb(var(--wa) / .12)); color: rgb(var(--p-600)); }
.dark .monogram { color: rgb(var(--p-300)); }

/* ========================================================= 1) AURORA CAM */
html[data-tema="aurora"] {
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-sans: "Inter", system-ui, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --wa: 37 211 102; --wa-dark: 29 168 81; --wa-deep: 7 94 84;
  --p-50: 236 253 245; --p-100: 209 250 229; --p-200: 167 243 208; --p-300: 110 231 183; --p-400: 52 211 153;
  --p-500: 16 185 129; --p-600: 5 150 105; --p-700: 4 120 87; --p-800: 6 95 70; --p-900: 6 78 59;
  --g-50: 248 250 252; --g-100: 241 245 249; --g-200: 226 232 240; --g-300: 203 213 225; --g-400: 148 163 184;
  --g-500: 100 116 139; --g-600: 71 85 105; --g-700: 51 65 85; --g-800: 30 41 59; --g-900: 15 23 42;
  --ink-700: 22 32 58; --ink-800: 15 22 38; --ink-900: 10 15 26;
  --zemin: 246 248 251; --yuzey: 255 255 255; --cizgi: 226 232 240; --metin: 15 23 42;
}
html[data-tema="aurora"].dark { --zemin: 10 15 26; --yuzey: 17 24 42; --cizgi: 255 255 255 / .08; --metin: 241 245 249; }
html[data-tema="aurora"].dark .kart, html[data-tema="aurora"].dark .panel { border-color: rgb(255 255 255 / .08); background: rgb(255 255 255 / .035); backdrop-filter: blur(14px); }
html[data-tema="aurora"].dark .glass { border-color: rgb(255 255 255 / .08); background: rgb(255 255 255 / .04); }
html[data-tema="aurora"] .aurora-sahne { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html[data-tema="aurora"] .aurora-bulut { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .5; animation: suzul 22s ease-in-out infinite alternate; }
html[data-tema="aurora"] .aurora-bulut:nth-child(1) { width: 48rem; height: 48rem; left: -12rem; top: -20rem; background: rgb(var(--wa) / .35); }
html[data-tema="aurora"] .aurora-bulut:nth-child(2) { width: 40rem; height: 40rem; right: -14rem; top: -8rem; background: rgb(56 189 248 / .30); animation-duration: 28s; }
html[data-tema="aurora"] .aurora-bulut:nth-child(3) { width: 36rem; height: 36rem; left: 30%; bottom: -24rem; background: rgb(168 85 247 / .18); animation-duration: 34s; }
html[data-tema="aurora"]:not(.dark) .aurora-bulut { opacity: .28; }
@keyframes suzul { to { transform: translate3d(6rem, 4rem, 0) scale(1.15); } }
/* Kartlarda imleci takip eden ışık */
html[data-tema="aurora"] .kart { position: relative; }
html[data-tema="aurora"] .kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--wa) / .12), transparent 45%); }
html[data-tema="aurora"] .kart:hover::before { opacity: 1; }
html[data-tema="aurora"] .hero-baslik .vurgu-yazi { background: linear-gradient(90deg, rgb(var(--wa)), #38bdf8, rgb(var(--wa))); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: parilti 6s linear infinite; }
@keyframes parilti { to { background-position: 200% center; } }
html[data-tema="aurora"] .etiket { background: rgb(var(--wa) / .1); color: rgb(var(--wa)); border: 1px solid rgb(var(--wa) / .25); border-radius: 9999px; }



/* Arama kutusunun içindeki alan ayrıca çerçevelenmesin (çerçeve .arama-kutu'da) */
html[data-tema] .arama-kutu input { border: 0 !important; box-shadow: none !important; background: transparent !important; }