/* ---------- Tema değişkenleri ---------- */
:root {
  --ink: #1d1a17; --muted: #5b544b;
  --glass: rgba(255, 255, 255, .42); --glass-strong: rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .75); --glass-shadow: 0 8px 32px rgba(70, 50, 30, .18);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --accent: #c2612c;
  --bg1: #fbe7d0; --bg2: #e9f3e4; --bg3: #dfe8fb;
  --blob-a: #ff9a56; --blob-b: #4cc98a; --blob-c: #6f8cff; --blob-d: #ff6fa5; --blob-e: #ffd34e;
  --blob-op: .75;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #f4ede4; --muted: #b6ab9b;
  --glass: rgba(40, 34, 30, .38); --glass-strong: rgba(50, 43, 38, .58);
  --glass-border: rgba(255, 255, 255, .16); --glass-shadow: 0 10px 36px rgba(0, 0, 0, .5);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --accent: #ffa566;
  --bg1: #1a1210; --bg2: #0f1a15; --bg3: #101428;
  --blob-a: #d9531e; --blob-b: #17a066; --blob-c: #3d4fd6; --blob-d: #b8236b; --blob-e: #b88a10;
  --blob-op: .6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f4ede4; --muted: #b6ab9b;
    --glass: rgba(40, 34, 30, .38); --glass-strong: rgba(50, 43, 38, .58);
    --glass-border: rgba(255, 255, 255, .16); --glass-shadow: 0 10px 36px rgba(0, 0, 0, .5);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
    --accent: #ffa566;
    --bg1: #1a1210; --bg2: #0f1a15; --bg3: #101428;
    --blob-a: #d9531e; --blob-b: #17a066; --blob-c: #3d4fd6; --blob-d: #b8236b; --blob-e: #b88a10;
    --blob-op: .6;
    color-scheme: dark;
  }
}
/* kategori renkleri */
:root { --c-yenilebilir: #1f9d55; --c-sartli: #d9a400; --c-zehirli: #e8590c; --c-olumcul: #d6283a; --c-halusinojen: #8f4fe0; --c-yenmez: #7a8798; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: linear-gradient(135deg, var(--bg1), var(--bg2) 55%, var(--bg3)) fixed;
}

/* ---------- Arka plan: canlı renkli blob'lar (camın arkasından görünür) ---------- */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; opacity: var(--blob-op); background: radial-gradient(circle, var(--bc) 0%, transparent 68%); }
.b1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; --bc: var(--blob-a); }
.b2 { width: 40vmax; height: 40vmax; right: -10vmax; top: 8vh; --bc: var(--blob-c); }
.b3 { width: 38vmax; height: 38vmax; left: 20vw; bottom: -16vmax; --bc: var(--blob-b); }
.b4 { width: 26vmax; height: 26vmax; right: 12vw; bottom: 6vh; --bc: var(--blob-d); }
.b5 { width: 22vmax; height: 22vmax; left: 40vw; top: 30vh; --bc: var(--blob-e); }

/* ---------- Cam yüzeyler ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}
.glass-inset {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-hi);
}

/* ---------- Üst çubuk (macOS araç çubuğu gibi) ---------- */
.toolbar {
  position: sticky; top: 10px; z-index: 20; margin: 10px auto 0; width: min(1240px, calc(100% - 24px));
  border-radius: 24px; padding: 12px 16px 14px;
}
.toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h1 { margin: 0; font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight: 600; font-size: 25px; letter-spacing: .01em; white-space: nowrap; color: var(--accent); text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; color: var(--muted); }
.search input { flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; padding: 10px 0; outline: none; min-width: 0; }
.search input::placeholder { color: var(--muted); }
.search:focus-within { box-shadow: var(--glass-hi), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

.btn {
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; padding: 9px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), 0 2px 8px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .15s, background .2s, box-shadow .2s;
}
.btn:hover { background: var(--glass-strong); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.lang { width: 46px; height: 40px; padding: 0; font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.btn.icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 17px; }
.btn:focus-visible, .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fade-x { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.fade-x.can-l { --fl: 28px; } .fade-x.can-r { --fr: 36px; }
.tabs { display: flex; gap: 8px; margin: 8px -6px 0; padding: 5px 6px 6px; overflow-x: auto; scrollbar-width: none; }
.letters { display: flex; gap: 6px; margin: 4px -6px 0; padding: 5px 6px 6px; overflow-x: auto; scrollbar-width: none; }
.letters::-webkit-scrollbar { display: none; }
.btn.chip { flex: none; min-width: 34px; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.btn.chip.latin { font-style: italic; }
.btn.chip[aria-pressed="true"] { background: var(--glass-strong); border-color: var(--accent); box-shadow: var(--glass-hi), 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.btn.chip:disabled { opacity: .35; cursor: default; transform: none; }
.cat-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 18px 4px 0; font-size: 20px; letter-spacing: -.01em; }
.cat-head .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.tab .n { font-size: 12px; opacity: .7; }
.tab .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--accent)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.tab[aria-selected="true"] { background: var(--glass-strong); border-color: var(--dot, var(--accent)); box-shadow: var(--glass-hi), 0 0 0 2px color-mix(in srgb, var(--dot, var(--accent)) 40%, transparent); font-weight: 600; }

/* ---------- İçerik ---------- */
main { width: min(1240px, calc(100% - 24px)); margin: 0 auto; padding-bottom: 32px; }
.intro { margin: 18px 0 8px; padding: 14px 18px; border-radius: 20px; font-size: 14px; }
.intro p { margin: 0; }
.info-card { margin: 12px 0 8px; border-radius: 20px; font-size: 14px; }
.info-card summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style-position: inside; }
.info-body { padding: 0 18px 14px; }
.info-body p { margin: 8px 0; } .info-body ul { margin: 6px 0; padding-left: 20px; } .info-body li { margin: 3px 0; }
.info-body .src { color: var(--muted); font-size: 12px; }
.count { color: var(--muted); font-size: 13px; margin: 12px 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.card { min-width: 0; }
.info h3, .info em { overflow-wrap: anywhere; }

.card {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 8px; color: inherit; font: inherit; cursor: pointer;
  border-radius: 24px; background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: transform .2s ease, background .2s;
  content-visibility: auto; contain-intrinsic-size: 330px 300px;
}
.card:hover { transform: translateY(-4px); background: var(--glass-strong); }
.photo { position: relative; aspect-ratio: 4/3; border-radius: 17px; overflow: hidden; display: grid; place-items: center; font-size: 48px;
  background: color-mix(in srgb, var(--cc) 25%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.photo img.ok { opacity: 1; }
.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #fff;
  background: color-mix(in srgb, var(--cc) 72%, transparent); border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.info { padding: 10px 8px 8px; }
.info h3 { margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.latin-name { font-style: italic; font-weight: 600; }
.m-text h2 .latin-name { font-weight: 700; }
.auto { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.info em { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

.more { text-align: center; margin: 26px 0 0; }
.empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--muted); }

/* ---------- Modal ---------- */
dialog { border: 1px solid var(--glass-border); border-radius: 28px; padding: 0; width: min(680px, calc(100% - 24px)); max-height: calc(100vh - 32px); color: var(--ink); overflow: auto; }
dialog.glass { background: var(--glass-strong); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); }
dialog::backdrop { background: rgba(20, 14, 10, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border-bottom: 1px solid var(--glass-border); }
.modal-bar-title { min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.close { flex: none; }
html.modal-open { overflow: hidden; }
dialog { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.m-photo { position: relative; aspect-ratio: 16/10; margin: 12px 12px 0; border-radius: 20px; overflow: hidden; display: grid; place-items: center; font-size: 80px; background: color-mix(in srgb, var(--cc) 25%, transparent); }
.m-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.m-photo img.ok { opacity: 1; }
.m-text { padding: 16px 22px 24px; }
.m-text h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.m-text .latin { color: var(--muted); font-style: italic; }
.m-text p { margin: 12px 0 0; }
.about p { margin: 10px 0 0; }
.about p:first-child { margin-top: 12px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; padding: 12px 14px; border-radius: 16px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; }
.warn { margin-top: 14px; padding: 12px 14px; border-radius: 16px; font-size: 14px; background: color-mix(in srgb, var(--cc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 50%, transparent); }
.wiki { font-size: 13px; color: var(--muted); }
.m-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.m-actions a { text-decoration: none; display: inline-block; }

footer { text-align: center; color: var(--muted); font-size: 12px; padding: 12px 20px 40px; }

@media (max-width: 700px) {
  /* Üst çubuk: yapışkan olmasın (ekranı kaplamasın); başlık + dil + tema tek satırda, arama altta */
  .toolbar { position: static; margin-top: 10px; padding: 12px 12px 12px; border-radius: 22px; }
  .toolbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 8px; }
  .toolbar-row > h1 { grid-column: 1; grid-row: 1; font-size: 22px; overflow: hidden; text-overflow: ellipsis; }
  .toolbar-row > .lang { grid-column: 2; grid-row: 1; }
  .toolbar-row > #theme { grid-column: 3; grid-row: 1; }
  .toolbar-row > .search { grid-column: 1 / -1; grid-row: 2; flex: none; }
  .btn.lang { width: 44px; } .btn.icon { width: 40px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { border-radius: 20px; padding: 6px; }
  .info h3 { font-size: 14px; } .info em { font-size: 12px; }
  .intro { font-size: 13px; } .cat-head { font-size: 18px; }
  main, .toolbar { width: calc(100% - 20px); }
}
@media (max-width: 439px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* dar telefonlarda tek sütun */
  .info h3 { font-size: 16px; } .info em { font-size: 13px; }
  dialog { width: calc(100% - 16px); border-radius: 24px; }
  .m-text { padding: 14px 16px 20px; } .m-text h2 { font-size: 22px; }
}
/* Yukarı çık düğmesi (mobilde yapışkan üst çubuk olmadığı için) */
.btn.fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; width: 46px; height: 46px; display: none; font-size: 20px; }
.btn.fab.show { display: grid; }
@media (min-width: 701px) { .btn.fab.show { display: none; } }

/* Dil düğmesi: hedef dilin bayrağı cam yüzeyin arkasından hafifçe seçilir */
.btn.lang { position: relative; overflow: hidden; isolation: isolate; width: 54px; color: var(--ink); font-weight: 700; text-shadow: 0 1px 2px rgba(255, 255, 255, .85); }
.btn.lang[data-to="tr"] { --flag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23e30a17'/><circle cx='10.8' cy='10' r='5' fill='%23fff'/><circle cx='12.2' cy='10' r='4' fill='%23e30a17'/><polygon points='18.40,9.35 17.21,10.26 17.63,11.70 16.40,10.85 15.17,11.70 15.59,10.26 14.40,9.35 15.90,9.31 16.40,7.90 16.90,9.31' fill='%23fff'/></svg>"); }
.btn.lang[data-to="en"] { --flag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='a'><path d='M0 0h60v30H0z'/></clipPath><clipPath id='b'><path d='M30 15h30v15zv15H0zH0V0zV0h30z'/></clipPath><g clip-path='url(%23a)'><path d='M0 0v30h60V0z' fill='%23012169'/><path d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/><path d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/><path d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/><path d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/></g></svg>"); }
.btn.lang::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--flag) center / cover no-repeat; opacity: .5; filter: saturate(.8); transition: opacity .2s; }
.btn.lang::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,255,255,.7), transparent 75%), linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.1) 55%, transparent); }
.btn.lang:hover::before { opacity: .68; }
:root[data-theme="dark"] .btn.lang { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .btn.lang::before { opacity: .38; }
:root[data-theme="dark"] .btn.lang::after { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(20,16,12,.55), transparent 75%), linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.lang { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) .btn.lang::before { opacity: .38; }
  :root:not([data-theme="light"]) .btn.lang::after { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(20,16,12,.55), transparent 75%), linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 55%, transparent); }
}

/* Cam efekti desteklenmeyen tarayıcılarda opak yüzey */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-inset, .card, .btn { background: var(--glass-strong); }
}

/* ---------- İmleçler (Mousecape teması: yaprak ok + pati bağlantı) ---------- */
html, body { cursor: url(cursors/arrow.png) 3 2, auto; }
@supports (cursor: image-set(url(a.png) 1x)) {
  html, body { cursor: image-set(url(cursors/arrow.png) 1x, url(cursors/arrow@2x.png) 2x) 3 2, auto; }
}
a, button:not(:disabled), summary, label, select, [role="button"], .btn, .card, .chip, .tab {
  cursor: url(cursors/link.png) 8 2, pointer;
}
@supports (cursor: image-set(url(a.png) 1x)) {
  a, button:not(:disabled), summary, label, select, [role="button"], .btn, .card, .chip, .tab {
    cursor: image-set(url(cursors/link.png) 1x, url(cursors/link@2x.png) 2x) 8 2, pointer;
  }
}
.btn.chip:disabled, button:disabled { cursor: url(cursors/arrow.png) 3 2, default; }