/* Dijital Vatandaşlık Eğitimi — ortak stiller */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Arka planlar */
.hero-gradient { background: linear-gradient(135deg, #fcf9f8 0%, #dce1ff 100%); }
.student-gradient { background: radial-gradient(circle at top right, #dce1ff 0%, #fcf9f8 60%); }
.parent-gradient { background: linear-gradient(135deg, #fff6ee 0%, #fcf9f8 60%); }
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Görsel yüklenmezse altındaki degrade görünür */
.media {
  background: linear-gradient(135deg, #003399 0%, #3557bc 45%, #73C026 100%);
  position: relative;
}
.media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media > .media-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 56px; pointer-events: none;
}
.media > img + .media-icon { z-index: -1; }

/* Kart hareketi */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(0, 32, 104, .35); }

/* Aktif menü çizgisi */
.nav-active { color: #003399; font-weight: 700; box-shadow: inset 0 -4px 0 0 #003399; }

/* İlerleme çubuğu */
.bar { transition: width .8s cubic-bezier(.16,1,.3,1); }

/* Filtre çipleri */
.chip {
  border: 1px solid #c4c5d5; background: #fff; color: #444653;
  padding: 8px 16px; border-radius: 9999px; font-size: 14px; font-weight: 600;
  transition: all .2s ease; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: #003399; color: #003399; }
.chip[aria-pressed="true"] { background: #002068; border-color: #002068; color: #fff; }

/* Açılır içerik */
details.acc > summary { list-style: none; cursor: pointer; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc[open] .acc-caret { transform: rotate(180deg); }
.acc-caret { transition: transform .25s ease; }

/* Erişilebilirlik */
:focus-visible { outline: 3px solid #fc820c; outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: #002068; color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { left: 8px; }

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

/* Yazdırma (aile sözleşmesi) */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .print-block { box-shadow: none !important; border: 1px solid #999 !important; }
}

/* ---- Veri yüklenirken görünen iskelet ---- */
.yukleniyor { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.iskelet {
  background: #fff; border: 1px solid #c4c5d5; border-radius: 16px;
  padding: 24px; min-height: 180px;
}
.iskelet span {
  display: block; height: 12px; border-radius: 6px; margin-bottom: 12px;
  background: linear-gradient(90deg, #eae7e7 25%, #f6f3f2 50%, #eae7e7 75%);
  background-size: 200% 100%; animation: parla 1.4s ease-in-out infinite;
}
.iskelet span:nth-child(1) { width: 45%; height: 20px; }
.iskelet span:nth-child(2) { width: 90%; }
.iskelet span:nth-child(3) { width: 75%; }
.iskelet span:nth-child(4) { width: 60%; }
@keyframes parla { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.yukleniyor-satir { display: grid; gap: 12px; }
.yukleniyor-satir .iskelet { min-height: 90px; }