:root{
  --krem:#FBF9F6; --altin:#A8823F; --koyu:#1A1613; --cizgi:#E8E1D6; --mut:#8A8072;
  --kart:#FFFFFF; --kirmizi:#B23A34;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--krem); color:var(--koyu);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
  padding:0 0 78px 0;
}
h1{font-family:Courgette,cursive; font-size:26px; font-weight:400; margin:14px 16px 6px}
h2{font-size:14px; letter-spacing:.02em; text-transform:none; margin:22px 16px 8px; color:var(--koyu)}
.top{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--cizgi); background:var(--krem);
  position:sticky; top:0; z-index:5;
}
.brand{font-family:Courgette,cursive; font-size:21px}
.brand span{color:var(--altin)}
.when{font-size:11px; color:var(--mut)}
.when .cikis{color:var(--mut); text-decoration:none; border-bottom:1px dotted var(--mut)}
main{padding:0 0 10px 0; max-width:720px; margin:0 auto}
.card{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:14px;
  padding:14px; margin:10px 16px;
}
.lbl{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--altin); margin-bottom:6px}
.big{font-family:Courgette,cursive; font-size:20px; line-height:1.35}
.muted{color:var(--mut)}
.tiny{font-size:12px}
.gold{background:var(--altin); color:#fff; border:none}
.x{background:transparent; color:var(--mut); border:1px solid var(--cizgi)}
.btn{
  font-family:Montserrat,sans-serif; font-size:14px; font-weight:500;
  padding:10px 16px; border-radius:10px; cursor:pointer;
}
.sm{padding:7px 12px; font-size:13px}
.row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.row.gap{justify-content:flex-start; margin-top:10px}
.badge{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--altin); border:1px solid var(--altin); border-radius:20px; padding:2px 9px; white-space:nowrap;
}
.add form{display:flex; flex-direction:column; gap:8px}
input[type=text],input[type=password],textarea,select{
  font-family:Montserrat,sans-serif; font-size:15px; width:100%;
  padding:11px 12px; border:1px solid var(--cizgi); border-radius:10px; background:#fff; color:var(--koyu);
}
input:focus,textarea:focus{outline:2px solid #E4D3B0; border-color:var(--altin)}
.hesap{font-weight:600; color:var(--koyu); text-decoration:none; border-bottom:1px solid var(--cizgi)}
.hesap:hover{border-color:var(--altin)}
.tiny.muted{margin:4px 0 0}
.empty{text-align:center; color:var(--mut)}
.err{background:#FBEDEC; color:var(--kirmizi); border:1px solid #F0D3D1; border-radius:10px; padding:10px 12px; margin:10px 16px; font-size:14px}
.ok{color:#3B7A57; font-size:13px; margin-top:8px}
.gate{max-width:420px; margin:8vh auto 0; padding:0 16px}
.gate h1{text-align:center; margin-left:0; margin-right:0}
.gate .card{display:flex; flex-direction:column; gap:12px; margin:16px 0}
label{display:block; font-size:12px; color:var(--mut)}
label input{margin-top:5px}
pre.ozet{white-space:pre-wrap; font-family:inherit; font-size:14px; margin:10px 0 0}
details summary{cursor:pointer; font-weight:600; font-size:14px}
.chk{display:flex; gap:9px; align-items:flex-start; font-size:14px; padding:7px 0; border-bottom:1px dashed var(--cizgi)}
.chk input{margin-top:3px}
.arsivsatir{display:block; padding:11px 2px; border-bottom:1px solid var(--cizgi); color:var(--koyu); text-decoration:none}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font-family:Montserrat,sans-serif; font-size:11.5px; color:var(--altin);
  background:#fff; border:1px solid var(--altin); border-radius:20px; padding:6px 11px; cursor:pointer;
}
.blok{border-top:1px dashed var(--cizgi); padding:9px 0 3px; margin-top:8px}
.blok .lbl{margin-bottom:4px}
.gorev{padding:6px 0; border-bottom:1px dashed var(--cizgi)}
.gorev:last-child{border-bottom:none}
.tamam{text-decoration:line-through; color:var(--mut)}
.mgorev{border-top:1px dashed var(--cizgi); margin-top:8px; padding-top:6px}
.mgorev .lbl{margin-bottom:4px}
.mkarar{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:6px; border-top:1px dashed var(--cizgi)}
.mkarar .btn{width:auto; margin:0}
.fikirgorsel{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:12px; border:1px solid var(--cizgi); display:block; margin-bottom:8px; background:#F1EADC}
/* --- Reels akışı (kaydırmalı) --- */
.filterbar{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.chip.on{background:var(--altin); color:#fff; border-color:var(--altin)}
.reels{height:calc(100dvh - 250px); min-height:380px; overflow-y:auto; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch; border-radius:16px; border:1px solid var(--cizgi); background:#0E0B08}
.rslide{position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; align-items:flex-end; overflow:hidden}
.rkare{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rkare.yok{display:flex; align-items:center; justify-content:center; color:#8A8072; font-size:12px; background:#1A1512}
.rperde{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 70%)}
.rbilgi{position:relative; z-index:2; padding:14px; width:100%; color:#fff}
.rhesap{color:#fff; font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.rrozet{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#E9D9B4; border:1px solid rgba(233,217,180,.5); border-radius:8px; padding:1px 6px}
.rstat{display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:#E6DFD3; margin-top:6px}
.rkullan{font-size:11px; color:#F0D79A; margin-top:8px; line-height:1.4}
.rmetin{font-size:11.5px; color:#DFD9CE; margin-top:8px; max-height:54px; overflow:hidden; line-height:1.45}
.rmetin a{color:#F0D79A}
.rtus{margin-top:10px; display:inline-block; width:auto}
.rbtn{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.rbtn .btn{width:auto; margin:0}
/* --- seçenek sayfası (bottom sheet) --- */
.sayfa{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end}
.sayfa[hidden]{display:none}   /* hidden özniteliği display:flex'i ezmeli, yoksa görünmez katman tıklamayı yer */
.sayfaperde{position:absolute; inset:0; background:rgba(20,15,10,.55)}
.sayfaic{position:relative; width:100%; max-width:520px; margin:0 auto; background:#FBF9F6;
  border-radius:18px 18px 0 0; padding:16px; max-height:86dvh; overflow-y:auto; box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.secim{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--cizgi);
  border-radius:12px; padding:10px 12px; margin:8px 0; cursor:pointer}
.secim b{display:block; font-size:13.5px}
.secim span{display:block; font-size:11.5px; color:#8A8072; margin-top:2px; line-height:1.4}
.secim:hover{border-color:var(--altin)}
#komutAlan{margin:8px 0}
#komutAlan textarea{width:100%; min-height:74px; border:1px solid var(--cizgi); border-radius:12px;
  padding:10px; font-family:inherit; font-size:13px; background:#fff; margin-bottom:8px}
.gkara{display:flex; gap:10px; align-items:flex-start}
.gkara img{width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--cizgi); flex:0 0 auto; background:#F1EADC}
.kimlik{display:flex; align-items:center; gap:8px; min-width:0}
.avatar{width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--cizgi); background:#F1EADC}
.kucukler{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.kucukler a{position:relative; display:block; width:calc((100% - 12px)/3); max-width:110px; border-radius:10px; overflow:hidden; border:1px solid var(--cizgi)}
.kucukler img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.kucukler .rozet{position:absolute; left:4px; bottom:4px; background:rgba(26,22,19,.72); color:#fff; font-size:10px; padding:1px 5px; border-radius:6px}
.ozet.metin{white-space:pre-wrap; word-wrap:break-word; font-size:14px; line-height:1.55}
.izgara{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ukart{background:#fff; border:1px solid var(--cizgi); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.uimg{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#F1EADC}
.uimg.yok{display:flex; align-items:center; justify-content:center; color:var(--mut); font-size:12px}
.uic{padding:10px; display:flex; flex-direction:column; gap:5px}
.uad{font-size:13.5px; font-weight:600; line-height:1.3}
.ufiyat{font-family:Courgette,cursive; color:var(--altin); font-size:19px; line-height:1.1}
.satir{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.satir .btn{width:auto; margin:0}
@media(min-width:760px){ .izgara{grid-template-columns:repeat(4,1fr)} }
.balon{max-width:84%; border-radius:14px; padding:10px 12px; font-size:14px; line-height:1.45; word-wrap:break-word}
.balon .metin{white-space:pre-wrap}
.balon .saat{font-size:10.5px; color:var(--mut); margin-top:5px; letter-spacing:.04em}
.balon.sag{align-self:flex-end; background:var(--altin); color:#fff; border-bottom-right-radius:4px}
.balon.sag .saat{color:#F3E3C4}
.balon.sol{align-self:flex-start; background:#fff; border:1px solid var(--cizgi); border-bottom-left-radius:4px}
.yazbar{
  position:fixed; left:0; right:0; bottom:50px; z-index:9;
  display:flex; gap:8px; align-items:flex-end; padding:9px 12px;
  background:rgba(251,249,246,.97); border-top:1px solid var(--cizgi);
}
.yazbar textarea{
  flex:1; resize:none; font-family:Montserrat,sans-serif; font-size:15px; line-height:1.4;
  padding:10px 12px; border:1px solid var(--cizgi); border-radius:12px; background:#fff; color:var(--koyu);
}
.yazbar .btn{width:auto; margin:0; padding:11px 16px}
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; overflow-x:auto; gap:2px;
  background:rgba(251,249,246,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--cizgi); padding:6px 6px calc(6px + env(safe-area-inset-bottom)) 6px;
}
.tab{
  flex:1 0 auto; text-align:center; font-size:11.5px; color:var(--mut); text-decoration:none;
  padding:7px 10px; border-radius:9px; white-space:nowrap;
}
.tab.on{color:var(--koyu); background:#F1EADC; font-weight:600}
@media(min-width:760px){
  body{font-size:16px}
  .tabs{position:sticky; bottom:auto; top:56px; border-top:none; border-bottom:1px solid var(--cizgi); background:var(--krem)}
  .top{position:static}
  main{padding-top:6px}
  .yazbar{position:static; border:1px solid var(--cizgi); border-radius:12px; background:transparent; padding:9px 0}
  .sohbet{padding-bottom:20px}
  .balon{max-width:70%}
}