:root{
  /* Light tema */
  --bg:#f9f6ef;
  --panel:#fffaf5;          /* kart/panel yüzeyi */
  --surface:#ffffff;        /* küçük yüzeyler (buton/drop/sekme vb.) */
  --surface-2:#f4f4f4;      /* ikincil küçük yüzey */
  --ink:#1f2937;
  --muted:#6b7280;
  --border:#eadfcd;
  --shadow:0 10px 30px rgba(17,24,39,.06);

  --brand:#a16207;
  --brand-2:#e6b400;

  /* Rozet/aktif sekme */
  --soft-amber:#fff1cc;
  --soft-amber-border:#f2d78e;

  /* küçük yüzey yazı rengi ve accent üzeri yazı rengi */
  --text-surface:#1f2937;     /* light: koyu yazı */
  --text-on-accent:#1d1300;   /* light: açık amber üstünde koyu yazı */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(241,194,50,.08), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(161,98,7,.06), transparent 55%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
  <filter id='n'>\
    <feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/>\
  </filter>\
  <rect width='100%' height='100%' filter='url(%23n)' opacity='0.12'/>\
</svg>"),
    var(--bg);
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
  background-size:auto,auto,220px 220px,auto;
}

/* --------- RESET: butonların sistem görünümünü temizle --------- */
button{
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

/* linkler */
a{color:inherit}

.wrap{max-width:min(1600px,100%);margin:0 auto;padding:0 clamp(16px,4vw,64px)}
header{padding:28px 0 16px; display:flex; align-items:center; justify-content:space-between}

/* küçük yüzeyler */
.back{
  display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-weight:700;
  padding:8px 12px; border:1px solid var(--border); background:var(--surface);
  border-radius:10px; box-shadow:var(--shadow); color:var(--text-surface);
}

.title{font-family:"Poiret One", cursive; font-size:clamp(28px,4.2vw,54px); text-align:center; margin:10px 0 4px}
.subtitle{color:var(--muted); text-align:center; margin-bottom:18px}

.grid{display:grid; grid-template-columns: 420px 1fr; gap:24px}
@media (max-width: 1024px){ .grid{grid-template-columns:1fr; } }

/* form */
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.card .head{padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700}
.card .body{padding:16px}
.row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
label{font-size:14px; color:var(--muted)}
input[type="text"], textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  outline:none; font:inherit; color:var(--text-surface);
}
textarea{min-height:120px; resize:vertical}
.drop{
  border:2px dashed var(--border); border-radius:14px; padding:16px; text-align:center; background:var(--surface); color:var(--text-surface);
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; font-size:13px; color:var(--text-surface);
}
.chip b{font-weight:600}
.chip button{cursor:pointer; font-weight:700; color:inherit}

/* ---------- BUTONLAR (tema uyumlu) ---------- */
.btn{
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--text-surface) !important;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  box-shadow:var(--shadow);
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn.secondary{background:var(--surface-2) !important; color:var(--text-surface) !important}
.btn:hover{filter:brightness(0.97)}
.btn:active{transform:translateY(0.5px)}
/* Tema butonu için ekstra güvenlik: bazı UA stillerini ez */
#themeBtn{border:1px solid var(--border) !important; background:var(--surface-2) !important; color:var(--text-surface) !important}

/* ---------- Sekmeler ---------- */
.seg{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.seg button{
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--text-surface) !important;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.seg .active{
  background:var(--soft-amber) !important;
  border-color:var(--soft-amber-border) !important;
  color:var(--text-on-accent) !important;
}
.count{margin-left:auto; color:var(--muted); font-size:14px}

/* ---------- Liste ---------- */
.feed{display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width: 1100px){ .feed{grid-template-columns: repeat(2,minmax(0,1fr));} }
@media (max-width: 640px){ .feed{grid-template-columns:1fr;} }

.post{background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.post .media{display:block; position:relative; aspect-ratio: 4 / 3; background:#0f0f0f}
.post .media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.post .media > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.post .content{padding:12px}
.meta{display:flex; gap:10px; color:var(--muted); font-size:13px; margin-bottom:6px}
.note{white-space:pre-wrap; line-height:1.5}
.tags{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
.tag{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:var(--soft-amber); border:1px solid var(--soft-amber-border); color:var(--text-on-accent);
}

/* ---------- Lightbox (galeri) ---------- */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; z-index:70; padding:20px}
.lightbox.open{display:block}
.lightbox__scrim{position:absolute; inset:0}
html.modal-open, body.modal-open{height:100%; overflow:hidden; touch-action:none}

.lb_dialog{ position:relative; display:flex; flex-direction:column; gap:10px; max-width:min(1100px,100%); height:100%; margin:0 auto; }
.lb_close{position:absolute; top:8px; right:8px; z-index:10}
.lb_btn{border:1px solid #ffffff30; background:#ffffff20; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; backdrop-filter:blur(6px)}
.lb_btn:hover{background:#ffffff35}

.lb_stage{
  position:relative; flex:1; min-height:0; border-radius:14px; overflow:hidden; background:#111;
  display:flex; align-items:center; justify-content:center;
}
.lb_stage img, .lb_stage video, .lb_stage iframe{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; border:0; }

.lb_nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; user-select:none; }
.lb_prev{left:8px} .lb_next{right:8px}
.lb_nav i{ display:block; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.lb_prev i{ border-right:12px solid #fff; margin-left:4px}
.lb_next i{ border-left:12px solid #fff; margin-right:4px}

.lb_thumbs{ background:#0d0d0d; border-radius:12px; padding:10px 8px; border:1px solid #ffffff15; }
.lb_th_scroller{display:flex; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:6px}
.lb_thumb{ flex:0 0 auto; width:90px; height:60px; border-radius:8px; overflow:hidden; position:relative; border:2px solid transparent; cursor:pointer; background:#1c1c1c; }
.lb_thumb img, .lb_thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.lb_thumb.active{border-color:#ffd166; box-shadow:0 0 0 2px #ffd16655 inset}
.lb_thumb .vidBadge{ position:absolute; right:6px; bottom:6px; font-size:10px; color:#fff; background:#00000080; padding:2px 6px; border-radius:999px; border:1px solid #ffffff25 }

/* footer */
.footer{width:100%; margin:12px auto 40px; color:var(--muted); text-align:center}

/* ====== DARK MODE ====== */
html[data-theme="dark"]{
  --bg:#2f3336;
  --panel:#3a444c;
  --surface:#2b3035;
  --surface-2:#383f45;
  --ink:#FDFDFF;
  --muted:#C6C5B9;
  --border:#22292e;

  /* amber varyantları (aktif sekme/rozet) */
  --soft-amber:#4a3b16;
  --soft-amber-border:#6b5420;

  /* yazı renkleri */
  --text-surface:#f3f4f6;    /* dark: küçük yüzeylerde açık yazı */
  --text-on-accent:#ffffff;  /* dark: accent üstünde beyaz */
}

/* Not: Dark modda kart, buton, sekmeler yukarıdaki değişkenlerle otomatik uyumlu */