:root{
  --bg:#f6f7fb; --fg:#1f2328; --card:#ffffff; --muted:#6a7380; --line:#e5e7eb;
  --teal:#06b6d4; --blue:#3b82f6; --orange:#f97316; --purple:#8b5cf6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.5 system-ui,Segoe UI,Roboto,Arial;color:var(--fg);background:linear-gradient(180deg,#fff, var(--bg))}
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px}
.brand{font-weight:700;font-size:18px}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;transition:.15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.dot{width:96px;height:96px;border-radius:50%;border:6px solid #eef1f5;margin:6px 0}
.dot-teal{background:var(--teal)} .dot-blue{background:var(--blue)}
.dot-orange{background:var(--orange)} .dot-purple{background:var(--purple)}
button{padding:8px 16px;border:1px solid var(--line);border-radius:20px;background:#fff;cursor:pointer}
.footer{padding:28px;text-align:center;color:var(--muted)}

.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:inherit;transition:.15s}
.item:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}

.week-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.week{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;transition:.15s}
.week:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.resources ul{margin:0;padding-left:18px}
.resources li{margin:6px 0}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:12px 20px;
  position:sticky;
  top:0;
  z-index:10;
}

.nav-right a {
  text-decoration:none;
  color:var(--fg);
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:10px;
  transition:.2s;
}

.nav-right a:hover {
  background:var(--bg);
}
.folder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.folder-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 12px;
}
.folder-title{font-weight:600}
.card{display:block;text-decoration:none;color:inherit}
/* ---- Ana kart görseli ---- */
.card-head{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 6px 0 2px;
}

.hero{
  width: 120px; height: 120px;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9; /* fallback */
}

/* Görsel eşleştirmeleri (PNG) */
.hero.ilkokul    { background-image: url("assets/hero-ilkokul.png"); }
.hero.ortaokul   { background-image: url("assets/hero-ortaokul.png"); }
.hero.lise       { background-image: url("assets/hero-lise.png"); }
.hero.universite { background-image: url("assets/hero-universite.png"); }
.hero.yarisma    { background-image: url("assets/hero-yarisma.png"); }

/* Eski yuvarlakları tamamen devre dışı bırakmak isterseniz: */
.dot, .dot-teal, .dot-blue, .dot-orange, .dot-purple { display:none !important; }
/* Yarışmalar görsel kartları */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;
  text-decoration:none;color:inherit;transition:.2s;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.tile .thumb{
  width:160px;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:#f6f7fb;border:1px solid #e6e9f0;display:block;
}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile .title{font-weight:600;text-align:center}

/* ---- Klasör kartları ---- */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.folder{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:inherit;transition:.15s
}
.folder:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.folder__icon svg{display:block;width:72px;height:56px}
.folder__title{font-weight:600;text-align:center}

/* İlkolul bağlantılarını ve kartlarını UI'dan kaldır */
a[href*="/ilkokul/"],
a[href^="ilkokul/"],
a[href$="ilkokul"],
a[href$="ilkokul/"],
section.ilkokul,
div.ilkokul,
#ilkokul,
[data-level="ilkokul"] {
  display: none !important;
  visibility: hidden !important;
}