@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fontlar/barlow-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fontlar/barlow-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fontlar/barlow-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fontlar/barlow-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(fontlar/barlow-semi-condensed-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(fontlar/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --gece: #141414; --yuzey: #1f1f1f; --yuzey2: #2a2a2a; --beyaz: #fff; --soluk: #c9c9c9;
  --altin: #E9C25A; --antik: #B8862B; --kirmizi: #ff8a7a; --yesil: #8fd19e; --mavi: #9cc7ff;
  --alt-bar: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gece); color: var(--beyaz); font: 400 16px/1.5 "Barlow", system-ui, sans-serif;
  padding-bottom: calc(var(--alt-bar) + env(safe-area-inset-bottom)); }
h1, h2, h3 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
h1 { font-size: 1.6rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.05rem; color: var(--altin); margin: 1.5rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
a { color: var(--altin); }
button, input, select, textarea { font: inherit; color: inherit; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.ust { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--antik); }
.logo { width: 160px; height: auto; }
.ust-yazi { margin-left: auto; text-align: right; display: flex; flex-direction: column; font-size: .85rem; color: var(--soluk); }
.ust-yazi strong { font-family: "Barlow Semi Condensed", sans-serif; color: var(--altin); letter-spacing: .08em; font-size: 1rem; }

.kapi { max-width: 440px; margin: 32px auto; padding: 0 16px; }
.sekmeler { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--yuzey); border-top: 1px solid var(--antik); padding-bottom: env(safe-area-inset-bottom); }
.sekmeler button { min-height: var(--alt-bar); background: none; border: 0; color: var(--soluk); font-weight: 600; cursor: pointer; padding: 0 2px; }
.sekmeler button[aria-current="page"] { color: var(--altin); box-shadow: inset 0 3px 0 var(--altin); }

main { max-width: 900px; margin: 0 auto; padding: 16px; }
.baslik-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.baslik-satir h1, .baslik-satir h2 { margin: 0; }

button.d, .birincil, .dugmeler button, .filtre button, .kart button, .arac button, .ses-dugmeler button, .sekme-ic button {
  min-height: 44px; padding: 0 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--antik); background: var(--yuzey2); }
.birincil { background: var(--altin) !important; color: var(--gece) !important; border-color: var(--altin) !important; font-weight: 600; }
button:disabled { opacity: .5; cursor: not-allowed; }
.kucuk { min-height: 36px !important; padding: 0 10px !important; font-size: .9rem; }
.ikon { min-width: 48px; min-height: 44px; border-radius: 8px; border: 1px solid var(--antik); background: var(--yuzey2); cursor: pointer; font-size: 1.2rem; }
.ikon.acik { background: var(--kirmizi); color: var(--gece); border-color: var(--kirmizi); }

.filtre, .arac, .sekme-ic { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; align-items: center; }
.filtre button[aria-pressed="true"], .sekme-ic button[aria-pressed="true"] { border-color: var(--altin); color: var(--altin); }
.arac input[type="search"], .arac select { width: auto; flex: 1 1 160px; min-width: 0; }

.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kart { display: flex; gap: 12px; align-items: flex-start; background: var(--yuzey); border-radius: 10px; padding: 12px;
  border-left: 4px solid var(--yuzey2); flex-wrap: wrap; }
.kart.geciken, .kart.uyari { border-left-color: var(--kirmizi); }
.kart.bugun { border-left-color: var(--altin); }
.kart.google { border-left-color: var(--mavi); }
.kart .govde { flex: 1 1 200px; min-width: 0; }
.kart .ad { font-weight: 600; overflow-wrap: anywhere; }
.kart .alt { font-size: .875rem; color: var(--soluk); overflow-wrap: anywhere; white-space: pre-line; }
.kart.tamam .ad, .kart.arsiv .ad { text-decoration: line-through; color: var(--soluk); }
.kart input[type="checkbox"] { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--altin); flex: none; }
.kart .islemler { display: flex; gap: 6px; flex-wrap: wrap; }
.rozet { display: inline-block; font-size: .75rem; padding: 0 6px; border-radius: 4px; background: var(--yuzey2); margin: 0 4px 2px 0; }
.rozet.yuksek, .rozet.uyari { color: var(--kirmizi); } .rozet.ornek, .rozet.taslak, .rozet.oneri { color: var(--altin); }
.rozet.google { color: var(--mavi); } .rozet.ok { color: var(--yesil); }
.bos { color: var(--soluk); margin: 4px 0 0; }

.serit, .kutu { background: var(--yuzey); border: 1px solid var(--antik); border-radius: 8px; padding: 12px; margin: 0 0 12px; }
.serit { color: var(--altin); font-weight: 600; }
.kutu.uyari { border-color: var(--kirmizi); }
.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.karo { background: var(--yuzey); border: 1px solid var(--yuzey2); border-radius: 10px; padding: 14px; text-align: left; cursor: pointer; min-height: 72px; }
.karo strong { display: block; color: var(--altin); }
.sayi { font-size: 1.4rem; font-weight: 600; }
.cubuk { height: 8px; background: var(--yuzey2); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.cubuk span { display: block; height: 100%; background: var(--altin); }
.blok { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--yuzey2); }
.blok .saat { color: var(--soluk); font-variant-numeric: tabular-nums; }
.tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablo th, .tablo td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--yuzey2); }
.tablo th:first-child, .tablo td:first-child { text-align: left; }
.kaydir { overflow-x: auto; }

.mesajlar { display: flex; flex-direction: column; gap: 8px; min-height: 120px; margin-bottom: 12px; }
.balon { max-width: 88%; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.balon.kullanici { align-self: flex-end; background: var(--yuzey2); }
.balon.sekreter { align-self: flex-start; background: var(--yuzey); border: 1px solid var(--antik); }
.balon .islemler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.balon .islemler button { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--antik); background: var(--yuzey2); cursor: pointer; }
.sohbet-form { display: flex; gap: 8px; position: sticky; bottom: calc(var(--alt-bar) + 8px); background: var(--gece); padding: 4px 0; }
.sohbet-form input { flex: 1; min-width: 0; }
.ses-dugmeler { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ses-durum { color: var(--altin); font-size: .9rem; margin-bottom: 8px; }
.anahtar { display: flex !important; align-items: center; gap: 8px; color: var(--beyaz) !important; }
.anahtar input { width: 22px; height: 22px; min-height: 0; accent-color: var(--altin); }

.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: .9rem; color: var(--soluk); }
input, select, textarea { min-height: 44px; padding: 8px 10px; background: var(--gece); border: 1px solid #555; border-radius: 8px;
  color: var(--beyaz); width: 100%; color-scheme: dark; }
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ipucu, .durum-yazi { font-size: .85rem; color: var(--soluk); margin: 0; }
.hata { color: var(--kirmizi) !important; }
.dugmeler { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kod { font-family: ui-monospace, Consolas, monospace; background: var(--gece); padding: 8px; border-radius: 6px; overflow-wrap: anywhere; display: block; }

dialog { background: var(--yuzey); color: var(--beyaz); border: 1px solid var(--antik); border-radius: 12px; padding: 16px;
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog h2 { margin-top: 0; }

.ent-durum { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ent-durum.aktif { color: var(--yesil); } .ent-durum.demo, .ent-durum.baglanti_bekliyor, .ent-durum.yerel, .ent-durum.tarayici { color: var(--altin); }
.ent-durum.yok, .ent-durum.sonraki_asama { color: var(--soluk); }

@media (max-width: 420px) { .ikili { grid-template-columns: 1fr; } .sekmeler button { font-size: .9rem; } }
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .sekmeler { position: static; max-width: 900px; margin: 16px auto 0; border: 1px solid var(--antik); border-radius: 10px; overflow: hidden; }
  .sekmeler button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--altin); }
  .sohbet-form { bottom: 0; }
}
.karekod { background: #fff; padding: 8px; width: max-content; max-width: 100%; margin: 8px auto; border-radius: 6px; }
.karekod svg { display: block; max-width: 100%; height: auto; }