@charset "UTF-8";
/* ================= XREX — Katmanlı Dosya Tasarım Sistemi ================= */
/* Paylaşılan görsel derinlik / hareket / duyarlılık katmanı. Mevcut sınıf adlarına dokunmadan üstüne eklenir. */

@media (prefers-reduced-motion: no-preference) {
  :root { --xrex-motion: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- Temel doku ---- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(26,115,232,.22); color: var(--text); }

/* ---- Odak halkası (erişilebilirlik tabanı) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- Sidebar: aktif linkte kayan vurgu şeridi ---- */
.sidebar .nav-link { position: relative; transition: color .18s ease, background .18s ease, transform .15s ease; overflow: hidden; }
.sidebar .nav-link::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 62%; border-radius: 0 4px 4px 0; background: var(--grad, var(--accent));
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sidebar .nav-link.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar .nav-link:hover { transform: translateX(2px); }
.sidebar .nav-link.active { position: relative; }

/* ---- Katmanlı "dosya" derinliği: kart benzeri bileşenler ---- */
.card, .xcard, .tpl, .note, .result-card, .score-card, .search-panel, .modal, .profile-modal,
.examples > div, .cards > div {
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.tpl:hover, .result-card:hover, .cards > div:hover, .examples > div:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    0 1px 2px rgba(15,23,42,.06),
    0 10px 24px -8px rgba(15,23,42,.18),
    0 22px 40px -20px rgba(26,115,232,.22);
}
[data-theme="dark"] .tpl:hover, [data-theme="dark"] .result-card:hover,
[data-theme="dark"] .cards > div:hover, [data-theme="dark"] .examples > div:hover {
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 10px 24px -8px rgba(0,0,0,.55),
    0 22px 40px -20px rgba(99,140,255,.28);
}
.xcard:hover, .note:hover { box-shadow: 0 8px 22px -10px rgba(15,23,42,.16); }

/* ---- Giriş animasyonu: listeye/gride akan içerik ---- */
@keyframes xrexRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.grid > *, .results-grid > *, .nlist > *, #grid > *, #results > *, #list > * {
  animation: xrexRise .42s cubic-bezier(.22,1,.36,1) both;
}
.grid > *:nth-child(1),.results-grid > *:nth-child(1),.nlist > *:nth-child(1),#grid > *:nth-child(1),#results > *:nth-child(1),#list > *:nth-child(1){animation-delay:.02s}
.grid > *:nth-child(2),.results-grid > *:nth-child(2),.nlist > *:nth-child(2),#grid > *:nth-child(2),#results > *:nth-child(2),#list > *:nth-child(2){animation-delay:.06s}
.grid > *:nth-child(3),.results-grid > *:nth-child(3),.nlist > *:nth-child(3),#grid > *:nth-child(3),#results > *:nth-child(3),#list > *:nth-child(3){animation-delay:.10s}
.grid > *:nth-child(4),.results-grid > *:nth-child(4),.nlist > *:nth-child(4),#grid > *:nth-child(4),#results > *:nth-child(4),#list > *:nth-child(4){animation-delay:.14s}
.grid > *:nth-child(5),.results-grid > *:nth-child(5),.nlist > *:nth-child(5),#grid > *:nth-child(5),#results > *:nth-child(5),#list > *:nth-child(5){animation-delay:.18s}
.grid > *:nth-child(n+6),.results-grid > *:nth-child(n+6),.nlist > *:nth-child(n+6),#grid > *:nth-child(n+6),#results > *:nth-child(n+6),#list > *:nth-child(n+6){animation-delay:.20s}

/* ---- Sayfa başlığı: ince ışık dokusu (vellum üzerinden geçen ışık) ---- */
.page-title, .ptitle, .welcome, .head {
  position: relative;
}
.page-title::after, .ptitle::after {
  content: ''; position: absolute; inset: -18px -24px auto -24px; height: 130px; z-index: -1;
  background: radial-gradient(60% 100% at 15% 0%, rgba(26,115,232,.10), transparent 60%),
              radial-gradient(45% 90% at 85% 10%, rgba(155,114,203,.10), transparent 65%);
  filter: blur(6px);
  animation: xrexDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes xrexDrift { from { transform: translateX(-6px) translateY(0); } to { transform: translateX(6px) translateY(4px); } }

/* ---- Butonlar: basma geri bildirimi ---- */
.btn, .primary-btn, .pbtn, .mbtn, button {
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease, background .15s ease;
}
.btn:active, .primary-btn:active, .pbtn:active, .mbtn:active { transform: scale(.97); }
.icon-btn { transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease; }
.icon-btn:hover { transform: translateY(-1px) scale(1.05); }
.icon-btn:active { transform: scale(.92); }

/* ---- Sayısal veri/skor rozetleri: nabız vurgusu (dikkat çekmeden) ---- */
.score-ring, .score-badge { transition: transform .25s ease; }
.score-card:hover .score-ring { transform: scale(1.04); }

/* ================= Duyarlılık (responsive) sıkılaştırma ================= */
@media (max-width: 1080px) {
  .grid, .results-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
}
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .cwrap, .wrap { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 680px) {
  .topbar { padding: 10px 12px !important; flex-wrap: wrap; row-gap: 8px; }
  .model-tag { display: none; }
  .grid, .results-grid, .cards { grid-template-columns: 1fr !important; }
  .page-title h1, .ptitle h1 { font-size: 22px !important; }
  .modal, .profile-modal { max-width: 96vw !important; width: 96vw !important; }
  .modal-body { max-height: 70vh !important; }
  .btn, .primary-btn, .pbtn, .mbtn { min-height: 42px; }
  input, textarea, select { font-size: 16px !important; } /* iOS otomatik yakınlaştırmayı engeller */
}
@media (max-width: 460px) {
  .brand span:not(.brand-logo-wrap) { display: none; }
  .modal-acts, .modal-actions { flex-wrap: wrap; }
  .modal-acts .mbtn, .modal-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Dokunmatik hedefleri büyüt ---- */
@media (pointer: coarse) {
  .nav-link { min-height: 44px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
}