a {
        color: inherit;
        text-decoration: none;
      }

      /* LAYOUT */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
      }
      .app {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) 300px;
        gap: 16px;
      }
      @media (max-width: 1100px) {
        .app {
          grid-template-columns: 220px minmax(0, 1fr);
        }
        .right {
          display: none;
        }
      }
      @media (max-width: 860px) {
        .app {
          grid-template-columns: 1fr;
        }
        .left {
          display: none;
        }
      }

      /* NAVBAR */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid var(--border);
      }
      [data-theme="dark"] .nav {
        background: rgba(15, 18, 32, 0.75);
      }
      .nav .row {
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
      }
      .logo {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: conic-gradient(
          from 210deg,
          var(--accent),
          var(--accent-2),
          var(--accent)
        );
        box-shadow: var(--shadow);
      }
      .brand span {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .search {
        flex: 1;
        display: flex;
        gap: 8px;
        align-items: center;
        border: 1px solid var(--border);
        background: var(--card);
        padding: 8px 12px;
        border-radius: 12px;
      }
      .search input {
        flex: 1;
        background: transparent;
        border: 0;
        outline: 0;
        color: var(--text);
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .btn {
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--accent);
        font-weight: 800;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
      }
      .btn.primary {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow);
      }
      .iconbtn {
        border: 1px solid var(--border);
        background: var(--card);
        padding: 8px;
        border-radius: 10px;
        cursor: pointer;
      }
      .switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--border);
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--card);
      }

      /* TABBAR (mobile) */
      .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: none;
        background: var(--card);
        border-top: 1px solid var(--border);
      }
      .tabbar .inner {
        display: flex;
        justify-content: space-around;
        padding: 8px 0;
      }
      .tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--muted);
        font-size: 12px;
      }
      .tabbar a.active {
        color: var(--accent);
      }
      @media (max-width: 860px) {
        .tabbar {
          display: block;
        }
      }

      /* PANELS */
      .panel {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
      }
      .section-title {
        margin: 0 0 10px;
        font-size: 14px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      /* LEFT */
      .left {
        position: sticky;
        top: 80px;
        height: calc(100vh - 96px);
        overflow: auto;
        padding-bottom: 80px;
      }
      .left .panel {
        padding: 14px;
      }
      .filter-group {
        display: grid;
        gap: 8px;
        margin-bottom: 14px;
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--soft);
        cursor: pointer;
      }
      .chip input {
        accent-color: var(--accent);
      }
      .tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .tag {
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--card);
        color: #4a3a77;
      }
      .tag.fill {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
      }

      /* FEED */
      .center {
        display: grid;
        gap: 12px;
      }
      .tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .tab {
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--card);
        cursor: pointer;
      }
      .tab.active {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
      }

      /* COMPOSER */
      .composer {
        padding: 12px;
      }
      .row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .textbox {
        flex: 1;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        background: var(--bg);
      }
      .input {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 10px;
        background: var(--bg);
        min-width: 160px;
      }
      .actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .actions .mini {
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--soft);
        cursor: pointer;
      }

      /* POST CARD */
      .post {
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 16px;
        overflow: hidden;
      }
      .post .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
      }
      .user {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
      }
      .user .meta small {
        display: block;
        color: var(--muted);
      }
      .post .body {
        padding: 0 12px 12px;
      }
      .post .photo {
        height: 380px;
        overflow: hidden;
      }
      .post .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .post .foot {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        border-top: 1px solid var(--border);
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--soft);
        font-size: 13px;
      }
      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #fff;
        color: var(--accent);
        border: 1px solid var(--border);
      }
      [data-theme="dark"] .kicker {
        background: #141a33;
      }

      /* RIGHT */
      .right {
        position: sticky;
        top: 80px;
        height: calc(100vh - 96px);
        overflow: auto;
        padding-bottom: 80px;
      }
      .right .panel {
        padding: 14px;
      }
      .list {
        display: grid;
        gap: 8px;
      }
      .item {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
      }
      .badge {
        padding: 6px 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        font-weight: 800;
      }

      /* STORIES */
      .stories {
        position: relative;
        overflow: auto;
        display: flex;
        gap: 10px;
        padding: 10px;
      }
      .story {
        min-width: 120px;
        height: 180px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--card);
        position: relative;
      }
      .story img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .story .grad {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
      }
      .story .txt {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        color: #fff;
        font-weight: 800;
      }

      /* REVEAL */
      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        will-change: opacity, transform;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }

      /* UTILS */
      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
      }
      .sep {
        height: 1px;
        background: var(--border);
        margin: 10px 0;
      }

      /* === GEÇİCİ POPUP (2 sn) === */
      .pop-wrap {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: none;
        place-items: center;
        background: rgba(10, 12, 20, 0.35);
        backdrop-filter: blur(3px);
      }
      .pop-wrap.show {
        display: grid;
        animation: popFadeIn 0.25s ease both;
      }

      .pop {
        max-width: 720px;
        width: min(92vw, 720px);
        background: var(--card);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 16px 18px;
        display: grid;
        gap: 10px;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
      }
      .pop .ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: 20px;
        color: #fff;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        box-shadow: 0 10px 26px rgba(124, 58, 237, 0.18);
      }
      .pop h3 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 900;
      }
      .pop p {
        margin: 0;
        color: var(--muted);
      }
      .pop .close {
        appearance: none;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--card);
        padding: 8px 10px;
        border-radius: 10px;
        font-weight: 800;
      }
      .pop .close:hover {
        box-shadow: var(--shadow);
      }
      .pop .mini {
        margin-left: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--soft);
        font-size: 12px;
        color: #4a3a77;
        font-weight: 800;
      }
      @keyframes popFadeIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes popFadeOut {
        to {
          opacity: 0;
          transform: translateY(6px);
        }
      }