* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body { font: 14px/1.3 system-ui, sans-serif; background: #fff; color: #111; }

.top { min-height: 41px; flex-wrap: wrap; display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid #111; }
.top b { font-size: 18px; }
.top span { color: #666; }

/* paddingsiz grid: kutular birbirine yapışık */
.grid { display: flex; flex-wrap: wrap; align-content: flex-start; }

.box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;           /* kutu içi boşluk; grid arası boşluk yok */
    border: 1px solid #111;
    margin: 0 -1px -1px 0;   /* çift çizgiyi önle */
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    background: #fff;
}
.box:hover { background: #ffef5c; }

/* Mobil (<640) varsayılan; sınıf başına genişlik + min yükseklik.
   Son satırdaki tek kutu flex-grow ile satırı doldurur. */
.box { flex: 1 0 auto; }
.t1 { width: 100%;     min-height: 140px; }
.t2 { width: 50%;      min-height: 110px; }
.t3, .t4 { width: 50%; min-height: 90px; padding: 8px; }
.t5, .t6 { width: 33.3333%; min-height: 80px; padding: 6px; font-size: 12px; }

/* Mobil: 4. sınıfın son kutusu (#24) 3'lü satıra katılır, tek kalan olmasın */
@media (max-width: 639px) { .box:nth-child(24) { width: 33.3333%; } }

.rank { color: #888; font-size: 11px; }
.title { font-size: 1em; word-break: break-word; }
.t1 .title { font-size: 22px; }
.t2 .title { font-size: 16px; }
.t3 .title, .t4 .title { font-size: 13px; }

.desc { color: #555; font-size: 12px; }
.t3 .desc, .t4 .desc, .t5 .desc, .t6 .desc { display: none; } /* küçük kutuda hover'da */
.t3:hover .desc, .t4:hover .desc, .t5:hover .desc, .t6:hover .desc { display: block; }

/* Tablet (640-1279): 3 / 5 / 8 / 8 / 10 / 10 satırları 3 / 5 / 4+4 / 4+4 / 5+5 / 5+5 */
@media (min-width: 640px) {
    .t1 { width: 33.3333%; min-height: 150px; }
    .t2 { width: 20%; min-height: 120px; }
    .t3, .t4 { width: 25%; min-height: 100px; }
    .t5, .t6 { width: 20%; min-height: 90px; }
    .t1 .title { font-size: 24px; }
    .t2 .title { font-size: 17px; }
}

/* Masaüstü (>=1280): her sınıf tek satır, toplam ekran yüksekliğine yayılır */
@media (min-width: 1280px) {
    body.home { display: flex; flex-direction: column; height: 100dvh; }
    .grid { flex: 1; min-height: 0; }
    .t1 { width: 33.3333%; height: 25.899%; min-height: 130px; }
    .t2 { width: 20%; height: 20.144%; min-height: 110px; }
    .t3 { width: 12.5%;    height: 15.827%; min-height: 90px; }
    .t4 { width: 12.5%;    height: 14.388%; min-height: 80px; }
    .t5 { width: 10%;      height: 12.23%; min-height: 70px; }
    .t6 { width: 10%;      height: 11.511%; min-height: 64px; font-size: 11px; }
}

/* Görsel hakkı: t1 ve t2'de üstte, t3'te sadece hover'da arka plan */
.img { display: none; width: calc(100% + 20px); margin: -10px -10px 0; object-fit: cover; }
.t1 .img, .t2 .img { display: block; flex: 1 1 0; min-height: 0; height: 0; }
.t2 .desc { display: none; }
.t3 .img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; transition: opacity .15s; z-index: 0; }
.t3:hover .img { display: block; opacity: .3; }
.t3 > :not(.img) { position: relative; z-index: 1; }
.t3 > .bar { position: absolute; }

/* Yuvarlak avatar / favicon: tüm sınıflarda, boyu sınıfa göre */
.head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.av { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.t1 .av { width: 40px; height: 40px; }
.t2 .av { width: 28px; height: 28px; }
.t3 .av, .t4 .av { width: 22px; height: 22px; }
.t5 .av, .t6 .av { filter: grayscale(1); }
.t5:hover .av, .t6:hover .av { filter: none; }

.meta { margin-top: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.bar { position: absolute; left: 0; bottom: 0; height: 4px; background: #111; }

/* Üst menü */
.top b a { color: inherit; text-decoration: none; }
.top nav { margin-left: auto; display: flex; gap: 14px; }
.top nav a { color: #111; font-size: 13px; }

/* Siteye bakıp dönünce çıkan modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal > div { background: #fff; border: 1px solid #111; padding: 18px 22px; min-width: 260px; max-width: 90vw; }
.modal p { margin-bottom: 8px; }
.modal .soft { color: #777; font-size: 12px; }
.modal button { margin-top: 6px; padding: 6px 14px; border: 1px solid #111; background: #fff; cursor: pointer; font: inherit; }
.modal button:hover { background: #ffef5c; }

/* Düz sayfalar: stats, mezunlar */
.page { padding: 18px 14px; max-width: 900px; }
.page h1 { font-size: 20px; margin-bottom: 12px; }
.page h2 { font-size: 15px; margin: 22px 0 8px; }
.page table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.page th, .page td { border: 1px solid #111; padding: 5px 8px; text-align: left; }
.page td.n, .page th.n { text-align: right; }
.page .soft { color: #777; font-size: 12px; margin-top: 8px; }

/* Filtre çubuğu: dil, etiket (ülke de aynı yapıyla eklenir) */
.filters { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 14px; border-bottom: 1px solid #111; font-size: 12px; }
.filters .grp { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.filters a { color: #666; text-decoration: none; }
.filters a:hover, .filters a.on { color: #111; text-decoration: underline; }
.filters a.on { font-weight: 600; }

/* Etiketler: sadece ilk iki sınıfta kutuda görünür */
.tags { display: none; gap: 4px; flex-wrap: wrap; }
.t1 .tags, .t2 .tags { display: flex; }
.tags em { font-style: normal; font-size: 10px; border: 1px solid #111; border-radius: 9px; padding: 0 6px; color: #444; }

/* Üst menüdeki giriş / link ekle düğmesi */
.btn { font: inherit; font-size: 13px; padding: 3px 10px; border: 1px solid #111; background: #ffef5c; cursor: pointer; }
.btn:hover { background: #111; color: #fff; }
.top nav { align-items: center; }

/* Giriş ve ekleme modalı (.modal ortak) */
.auth { display: grid; gap: 8px; width: min(360px, 90vw); background: #fff; border: 1px solid #111; padding: 18px 20px; max-height: 90vh; overflow: auto; }
.auth h3 { font-size: 16px; }
.auth input[type=text], .auth input[type=url], .auth input[type=email], .auth input[type=password], .auth select { font: inherit; padding: 7px 8px; border: 1px solid #111; background: #fff; width: 100%; }
.auth button { font: inherit; padding: 7px 12px; border: 1px solid #111; background: #fff; cursor: pointer; }
.auth button:hover:not(.link) { background: #ffef5c; }
.auth button.wide { width: 100%; }
.auth button.link { border: 0; background: none; color: #666; text-decoration: underline; padding: 2px 0; justify-self: start; }
.auth .row { display: flex; gap: 8px; }
.auth .row button { flex: 1; }
.auth .or { text-align: center; color: #aaa; font-size: 11px; }
.auth .tagpick { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.auth .msg { color: #b00020; font-size: 13px; }
.auth .msg.ok { color: #0a6b2a; }
.auth .soft { color: #777; font-size: 12px; }

/* Stats: ülke satırında bayrak (64px sprite yarı boyuta ölçeklenir, bkz. flags.css) */
.page .cn { display: flex; align-items: center; gap: 8px; }
.page .cn .flag { flex: none; }

/* Girişli kullanıcı: menüde avatar + isim, tıklayınca aynı modal */
.btn.me { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; background: #fff; border-radius: 16px; max-width: 180px; }
.btn.me:hover { background: #ffef5c; color: #111; }
.me-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.me-ini { display: inline-flex; align-items: center; justify-content: center; background: #111; color: #fff; font-size: 12px; }
.me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { .btn.me { padding-right: 3px; } .me-name { display: none; } }

/* Son bakılan site modalındaki şikayet satırı */
.modal .report { display: flex; gap: 6px; margin: 8px 0; }
.modal .report select { flex: 1; font: inherit; font-size: 13px; padding: 5px; border: 1px solid #111; background: #fff; min-width: 0; }
.modal .report button { margin: 0; }

/* Admin */
.page.wide { max-width: 1100px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 13px; }
.adm-tabs a { color: #666; text-decoration: none; }
.adm-tabs a.on { color: #111; font-weight: 600; text-decoration: underline; }
table.adm td { vertical-align: top; }
table.adm .acts { white-space: nowrap; }
table.adm button { font: inherit; font-size: 12px; padding: 3px 8px; border: 1px solid #111; background: #fff; cursor: pointer; margin: 0 4px 4px 0; }
table.adm button:hover { background: #ffef5c; }
table.adm button.danger:hover { background: #ffb3b3; }

/* Altbilgi, yasal sayfalar, çerez çubuğu */
.filters .legal-links { margin-left: auto; }
.foot { padding: 14px; font-size: 12px; display: flex; gap: 14px; border-top: 1px solid #ddd; margin-top: 18px; }
.foot a { color: #666; }
.page.legal { max-width: 720px; line-height: 1.55; }
.page.legal h1 { margin-bottom: 4px; }
.page.legal h2 { font-size: 15px; margin: 20px 0 6px; }
.page.legal ul { margin: 6px 0 6px 20px; }
.page.legal li { margin-bottom: 6px; }
.page.legal code { background: #f2f2f2; padding: 0 4px; }
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; background: #fff; border-top: 1px solid #111; font-size: 13px; }
.consent span { flex: 1 1 280px; }
.consent a { color: #111; }
.consent button { font: inherit; font-size: 13px; padding: 5px 14px; border: 1px solid #111; background: #fff; cursor: pointer; }
.consent button:last-child { background: #111; color: #fff; }
.consent button:hover { background: #ffef5c; color: #111; }

/* Modal: kullanıcının linkleri */
.auth .mine { display: grid; gap: 6px; border-top: 1px solid #ddd; padding-top: 8px; }
.auth .mrow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.auth .mrow .mt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.auth .mrow .ms { color: #777; font-size: 12px; }
.auth .mrow button { padding: 3px 8px; font-size: 12px; background: #ffef5c; }