/* OLURMU.XYZ - REDESIGN V2 - Modern Minimal */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');
:root{
  --bg:#0A0A0B;
  --bg2:#111113;
  --card:#17171A;
  --cardHover:#1D1D20;
  --card2:#1E1E22;
  --text:#F4F4F5;
  --muted:#A1A1AA;
  --muted2:#71717A;
  --line:#232326;
  --lineHover:#2A2A2E;
  --radius:18px;
  --radius2:22px;
  --a:#6366F1;
  --aHover:#5457E5;
  --b:#10B981;
  --bad:#EF4444;
  --shadow:0 8px 32px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04) inset;
  --shadow2:0 16px 48px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* TOPBAR - Glass premium */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(10,10,11,.82);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1120px; margin:0 auto;
  padding:14px 20px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brandMain{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none}
.logo{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,#6366F1 0%,#8B5CF6 50%,#06B6D4 100%);
  display:grid; place-items:center; font-weight:800; font-size:20px; color:white;
  box-shadow:0 4px 12px rgba(99,102,241,.35);
  position:relative; overflow:hidden;
}
.logo span{position:relative; z-index:2}
.brandText .title{
  font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1;
  color:var(--text);
}
.brandText .sub{font-size:11px; color:var(--muted2); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:2px}
.stats{display:flex; gap:8px; align-items:center}
.iconBtn{
  width:38px; height:38px; border-radius:11px;
  background:var(--card); border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer;
  color:var(--muted); transition:all .18s ease; font-size:16px;
  position:relative;
}
.iconBtn:hover{background:var(--cardHover); border-color:var(--lineHover); color:var(--text); transform:translateY(-1px)}
.iconBtn:active{transform:translateY(0)}
.notifDot,.bottleBadge{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--bad); box-shadow:0 0 0 2px var(--bg)}

/* Tabs */
.topbar-tabs{max-width:1120px; margin:0 auto; padding:0 20px 12px}
.seg{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
}
.segBtn{
  border:0; background:transparent; color:var(--muted);
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:13.5px;
  cursor:pointer; transition:all .18s ease;
}
.segBtn.active{background:white; color:black; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.segBtn:hover:not(.active){color:var(--text); background:rgba(255,255,255,.06)}

/* STAGE */
.stage{max-width:720px; margin:0 auto; padding:18px 16px 100px}

/* STORIES - horizontal scroll modern */
.stories{margin-bottom:18px}
.storiesHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.storiesTitle{font-weight:700; font-size:14px; letter-spacing:-.01em}
.storiesHint{font-size:12px; color:var(--muted2)}
.storiesRow{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
.storiesRow::-webkit-scrollbar{display:none}
.storiesRow .story{
  flex:0 0 64px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
}
.storiesRow .story .avatar{
  width:56px; height:56px; border-radius:50%; background:var(--card);
  border:2px solid transparent;
  background-clip:padding-box; position:relative;
  display:grid; place-items:center; font-weight:700;
  box-shadow:0 0 0 2px var(--line);
}
.storiesRow .story.active .avatar{box-shadow:0 0 0 2px var(--a)}

/* QUICK HUB */
.quickRow3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.quickCard{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px 12px; display:flex; align-items:center; gap:10px;
  transition:all .2s ease;
}
.quickCard:hover{background:var(--cardHover); border-color:var(--lineHover); transform:translateY(-1px)}
.quickIcon{width:32px; height:32px; border-radius:9px; background:rgba(99,102,241,.15); display:grid; place-items:center; font-size:16px}
.quickTitle{font-weight:700; font-size:13px}
.quickSub{font-size:11px; color:var(--muted2)}

/* FEED CARD - main redesign */
.feed{display:flex; flex-direction:column; gap:14px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius2);
  padding:18px 18px 14px; transition:all .2s ease;
}
.card:hover{border-color:var(--lineHover); background:var(--cardHover)}
.cardHead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.who{display:flex; gap:10px; align-items:center}
.miniAvatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#27272A,#3F3F46); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--muted)}
.whoName{font-weight:700; font-size:14px}
.whoSub{font-size:12px; color:var(--muted2)}
.meta{font-size:12px; color:var(--muted2); font-family:'JetBrains Mono',monospace}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{font-size:11px; font-weight:700; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted)}
.badge.hot{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.22); color:#6EE7B7}
.badge.editor{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.22); color:#A5B4FC}

.text{font-size:16px; line-height:1.62; letter-spacing:-.01em; white-space:pre-wrap; word-break:break-word; margin-bottom:14px}
.media{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0F0F10; margin-bottom:14px}
.media img{width:100%; display:block}
.media iframe{width:100%; aspect-ratio:16/9; border:0; display:block}

.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn{
  border:1px solid var(--line); background:var(--card2); color:var(--text);
  padding:9px 14px; border-radius:999px; font-weight:600; font-size:13px;
  cursor:pointer; transition:all .18s ease; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:var(--cardHover); border-color:var(--lineHover); transform:translateY(-1px)}
.btn.primary{background:var(--a); border-color:var(--a); color:white}
.btn.primary:hover{background:var(--aHover)}

/* FAB */
.fab{
  position:fixed; bottom:24px; right:24px; z-index:30;
  width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg,#6366F1,#8B5CF6); border:0; color:white;
  font-size:28px; cursor:pointer; box-shadow:var(--shadow2);
  transition:all .22s ease;
}
.fab:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 20px 60px rgba(99,102,241,.4)}

/* SHEETS / MODALS */
.backdrop{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  padding:16px;
}
.sheet{
  width:min(560px,100%); background:#17171A; border:1px solid #232326;
  border-radius:24px 24px 16px 16px; box-shadow:var(--shadow2); max-height:85vh; overflow:hidden;
  display:flex; flex-direction:column;
  animation:sheetIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes sheetIn{from{transform:translateY(24px) scale(.98); opacity:0} to{transform:translateY(0) scale(1); opacity:1}}
.sheetHead{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line)}
.sheetTitle{font-weight:700; font-size:16px}
.composeBody{padding:18px 20px; overflow:auto}
.field label{font-size:12px; font-weight:700; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:block}
.field textarea,.field .input,input.input{
  width:100%; background:#0F0F10; border:1px solid var(--line); border-radius:14px;
  padding:14px 14px; color:var(--text); outline:none; font-size:15px;
  transition:border .18s ease;
}
.field textarea:focus,.field .input:focus{border-color:var(--a)}
.field textarea{min-height:110px}
.composeFoot{padding:14px 20px 18px; border-top:1px solid var(--line)}
.primary{
  background:var(--a); border:0; color:white; font-weight:700;
  padding:12px 18px; border-radius:12px; cursor:pointer; width:100%;
  transition:all .18s ease;
}
.primary:hover{background:var(--aHover)}

/* Toast */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:#1F1F23; border:1px solid #2A2A2E; color:white;
  padding:12px 18px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow2); z-index:100;
}

/* Enter page redesign */
.enterBody{
  min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(80% 60% at 50% 0%,rgba(99,102,241,.22),transparent 60%),var(--bg);
  padding:20px;
}
.enterCard{
  width:min(440px,100%); background:var(--card); border:1px solid var(--line);
  border-radius:24px; padding:28px; box-shadow:var(--shadow2);
}
.enterLogo{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,#6366F1,#8B5CF6); display:grid; place-items:center;
  font-size:22px; font-weight:800; color:white; margin-bottom:18px;
}
.enterTitle{font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.enterSub{color:var(--muted); font-size:14px; margin-top:8px; line-height:1.5}
.enterHighlights{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.hl{display:flex; gap:10px; align-items:center; font-size:13.5px; padding:10px 12px; background:#0F0F10; border:1px solid var(--line); border-radius:12px}
.hl b{font-weight:700}
.miniLink{color:var(--a); font-weight:600}

/* Explore (TikTok style) - keep dark */
.ttBody{background:black; color:white}
.ttStage{height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory}
.ttTop{position:fixed; top:0; left:0; right:0; z-index:10; display:flex; gap:10px; padding:12px; background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}

/* Responsive */
@media(max-width:640px){
  .topbar-inner{padding:12px 14px 10px}
  .stage{padding:14px 12px 90px}
  .quickRow3{grid-template-columns:1fr 1fr 1fr}
  .card{padding:16px}
}