/* ─── SYSTEM-WIDE AESTHETICS (Playful Neo-Brutalism) ─── */
    :root {
      --bg-neo: #7c8cf5;
      /* Playful purple-blue background */
      --black: #000000;
      --white: #ffffff;

      /* Playful pastel cartoon palette */
      --color-lime: #06d6a0;
      --color-pink: #ff6b6b;
      --color-blue: #4cc9f0;
      --color-yellow: #ffd166;
      --color-orange: #ff9f1c;
      --color-purple: #a855f7;

      --neo-border: 3px solid #000000;
      --neo-border-thin: 2px solid #000000;
      --neo-shadow: 6px 6px 0px #000000;
      --neo-shadow-small: 4px 4px 0px #000000;
      --neo-shadow-large: 8px 8px 0px #000000;

      /* Theme Specific Variables (Light Mode Default) */
      --bg-screen: #ffffff;
      --bg-card-ui: #ffffff;
      --text-color: #000000;
      --text-muted: rgba(0, 0, 0, 0.55);
      --border-color: #000000;
      --nav-active: #7c8cf5;
      --bg-modal: rgba(124, 140, 245, 0.4);
      --card-bg-white: #ffffff;

      /* Tinder Buttons Light Theme Colors */
      --btn-undo-bg: #ffd166;
      --btn-undo-color: #000000;
      --btn-nope-bg: #ff6b6b;
      --btn-nope-color: #000000;
      --btn-profile-bg: #4cc9f0;
      --btn-profile-color: #000000;
      --btn-like-bg: #06d6a0;
      --btn-like-color: #000000;
      --btn-repost-bg: #a855f7;
      --btn-repost-color: #000000;

      /* Desktop Background Elements Light Theme Colors */
      --bg-grid-color: rgba(0, 0, 0, 0.05);
      --bg-shape-color: rgba(0, 0, 0, 0.04);
      --bg-text-color: rgba(0, 0, 0, 0.04);
    }

    body[data-theme="dark"] {
      --bg-neo: #1e2030;
      /* Deep saturated dark navy for background */
      --bg-screen: #141520;
      /* Darker slate navy for application container */
      --bg-card-ui: #1f2132;
      /* Slightly lighter dark indigo-slate for cards/inputs */
      --text-color: #f8fafc;
      /* Warm bright slate-white text */
      --text-muted: rgba(248, 250, 252, 0.85);
      --border-color: #000000;
      --nav-active: var(--color-lime);
      /* Playful neon-lime active navigation tab */
      --bg-modal: rgba(0, 0, 0, 0.65);
      --card-bg-white: #1f2132;

      /* Koyu mod için optimize edilmiş pofuduk neo-brutalist renk paleti (daha derin, göz yormayan ve yüksek kontrastlı) */
      --color-lime: #05c493;
      --color-pink: #e85c5c;
      --color-blue: #3cbbe3;
      --color-yellow: #e6bd55;
      --color-orange: #e88b17;
      --color-purple: #9046df;

      /* Tinder Buttons Dark Theme Colors */
      --btn-undo-bg: #28231a;
      --btn-undo-color: #ffd166;
      --btn-nope-bg: #341c21;
      --btn-nope-color: #ff6b6b;
      --btn-profile-bg: #152a36;
      --btn-profile-color: #4cc9f0;
      --btn-like-bg: #102e24;
      --btn-like-color: #06d6a0;
      --btn-repost-bg: #221831;
      --btn-repost-color: #a855f7;

      /* Desktop Background Elements Dark Theme Colors */
      --bg-grid-color: rgba(255, 255, 255, 0.02);
      --bg-shape-color: rgba(255, 255, 255, 0.015);
      --bg-text-color: rgba(255, 255, 255, 0.02);
    }

    /* ─── BASE RESET ─── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-neo);
      background-image: 
        linear-gradient(var(--bg-grid-color) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--bg-grid-color) 1.5px, transparent 1.5px);
      background-size: 55px 55px;
      color: var(--text-color);
      font-family: 'Nunito', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    /* ─── DECORATIVE SHAPES IN BACKGROUND ─── */
    .decorative-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    .bg-shape {
      position: absolute;
      background-color: var(--bg-shape-color);
      transition: background-color 0.3s;
    }

    .bg-shape-star-1 {
      top: 12%;
      left: 6%;
      width: 180px;
      height: 180px;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      transform: rotate(15deg);
    }

    .bg-shape-star-2 {
      bottom: 12%;
      right: 6%;
      width: 220px;
      height: 220px;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      transform: rotate(-25deg);
    }

    .bg-shape-circle-1 {
      top: 50%;
      left: 85%;
      width: 140px;
      height: 140px;
      border-radius: 50%;
    }

    .bg-shape-circle-2 {
      bottom: 50%;
      right: 85%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .bg-shape-square-1 {
      top: 75%;
      left: 10%;
      width: 90px;
      height: 90px;
      transform: rotate(20deg);
      border-radius: 12px;
    }

    .bg-shape-square-2 {
      top: 20%;
      right: 15%;
      width: 110px;
      height: 110px;
      transform: rotate(-15deg);
      border-radius: 16px;
    }

    .bg-shape-triangle-1 {
      top: 40%;
      left: 20%;
      width: 120px;
      height: 120px;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      transform: rotate(45deg);
    }

    /* Floating texts in background */
    .bg-text {
      position: absolute;
      font-family: 'Titan One', 'Baloo 2', sans-serif;
      font-weight: 900;
      color: var(--bg-text-color);
      text-transform: uppercase;
      letter-spacing: 3px;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      transition: color 0.3s;
    }

    .bg-text-1 {
      top: 15%;
      right: 12%;
      transform: rotate(-12deg);
      font-size: 2.8rem;
    }

    .bg-text-2 {
      bottom: 25%;
      left: 8%;
      transform: rotate(15deg);
      font-size: 3rem;
    }

    .bg-text-3 {
      top: 45%;
      left: 4%;
      transform: rotate(-8deg);
      font-size: 2.2rem;
    }

    .bg-text-4 {
      bottom: 12%;
      right: 22%;
      transform: rotate(10deg);
      font-size: 2.5rem;
    }

    .bg-text-5 {
      top: 8%;
      left: 32%;
      transform: rotate(5deg);
      font-size: 1.8rem;
    }

    #uni-detail-website {
      color: #0b82d6;
      transition: color 0.2s;
    }
    body[data-theme="dark"] #uni-detail-website {
      color: var(--color-blue);
    }

    /* Theme Switcher buttons styles */
    .theme-switch-group {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .theme-btn {
      flex: 1;
      background-color: var(--bg-card-ui);
      color: var(--text-color);
      border: var(--neo-border-thin);
      padding: 10px 4px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s;
      box-shadow: 2px 2px 0px #000;
    }

    .theme-btn:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    .theme-btn.active {
      background-color: var(--color-lime);
      color: #000000 !important;
      transform: translate(2px, 2px);
      box-shadow: 0px 0px 0px #000;
    }

    /* ─── APP CONTROLLER VIEWPORT ─── */
    .app-container {
      width: 100%;
      height: 100vh;
      background-color: var(--bg-screen);
      position: relative;
      display: flex;
      flex-direction: column;
      z-index: 5;
      overflow: hidden;
    }

    /* Mobile: body fills exact viewport, no overflow showing */
    @media (max-width: 767px) {
      body {
        align-items: flex-start;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
      }

      .app-container {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers with address bar */
        min-height: 100vh;
        min-height: 100dvh;
      }
    }

    /* Desktop Mock Frame */
    @media (min-width: 768px) {
      .app-container {
        width: 420px;
        height: 820px;
        border: 4px solid #000000;
        box-shadow: 12px 12px 0px #000000;
        border-radius: 36px;
      }
    }

    /* ─── SCREEN LAYOUT ─── */
    .screen {
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 24px 20px 88px;
      /* Bottom spacing to prevent overlap with Nav */
      overflow-x: hidden;
      overflow-y: auto;
      background-color: var(--bg-screen);
      position: relative;
    }

    #screen-discover {
      overflow: hidden;
    }

    .screen.active {
      display: flex;
    }

    /* ─── SCREEN: LOADING ─── */
    #screen-loading {
      background-color: var(--bg-screen);
      justify-content: center;
      align-items: center;
      padding-bottom: 24px;
      z-index: 200;
    }

    .loading-cartoon-char {
      width: 130px;
      height: 130px;
      margin-bottom: 16px;
      animation: bounceChar 2s infinite ease-in-out;
    }

    @keyframes bounceChar {

      0%,
      100% {
        transform: translateY(0) scaleY(1);
      }

      50% {
        transform: translateY(-15px) scaleY(0.95);
      }
    }

    .loading-text {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--text-color);
      text-align: center;
    }

    /* ─── SCREEN 1: WELCOME SCREEN ─── */
    #screen-welcome {
      justify-content: center;
      align-items: center;
      text-align: center;
      background: var(--bg-screen);
    }

    .welcome-logo {
      width: 140px;
      height: 140px;
      margin-bottom: 16px;
      animation: wobbleLogo 3s infinite ease-in-out;
    }

    @keyframes wobbleLogo {

      0%,
      100% {
        transform: rotate(0deg) scale(1);
      }

      25% {
        transform: rotate(-6deg) scale(1.05);
        /* Sola yatıp hafif büyüyor */
      }

      50% {
        transform: rotate(4deg) scale(0.95);
        /* Sağa yatıp hafif küçülüyor */
      }

      75% {
        transform: rotate(-3deg) scale(1.02);
      }
    }

    .welcome-title {
      font-family: 'Coiny', system-ui, sans-serif;
      font-size: 2.8rem;
      /* Tombul fontlar bazen küçük durabilir, boyutu hafif artırıldı */
      color: var(--color-lime);
      -webkit-text-stroke: 2px #000;
      /* Harf içlerinin kapanmaması için ideal sınır */
      text-shadow: 5px 5px 0px #000;
      margin-bottom: 4px;
      letter-spacing: 0.03em;
      /* Harfler tombul olduğu için biraz nefes payı */
      line-height: 1.2;
    }

    .welcome-subtitle {
      font-family: 'Baloo 2', 'Nunito', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 24px;
      letter-spacing: 0.01em;
    }

    .selection-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      width: 100%;
      max-width: 320px;
      margin-bottom: 24px;
    }

    .prism-btn {
      background-color: var(--bg-card-ui);
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-small);
      border-radius: 18px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text-color);
      transition: all 0.15s ease;
    }

    .prism-btn:hover {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px #000;
    }

    .prism-btn.selected {
      background-color: var(--color-lime);
      color: #000000 !important;
      transform: translate(3px, 3px);
      box-shadow: 1px 1px 0px #000;
    }

    .pyramid-mini-svg {
      width: 50px;
      height: 50px;
    }

    /* ─── SCREEN 2: RANK INPUT SCREEN ─── */
    #screen-rank {
      justify-content: center;
      align-items: center;
      background: var(--bg-screen);
    }

    .rank-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 320px;
      text-align: center;
    }

    .rank-label {
      font-family: 'Coiny', system-ui, sans-serif;
      font-size: 2.4rem;
      /* İhtiyaca göre 2.5rem veya 2.6rem de yapılabilir */
      color: var(--color-pink);
      -webkit-text-stroke: 2px #000;
      text-shadow: 4px 4px 0px #000;
      margin-bottom: 8px;
      letter-spacing: 0.03em;
      /* Coiny'nin tombul harfleri için ekstra nefes payı */
      line-height: 1.2;
      /* Harflerin alt/üst sınırlarının rahatlaması için */
    }

    .rank-desc {
      font-family: 'Baloo 2', 'Nunito', sans-serif;
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 24px;
      line-height: 1.45;
    }

    .cube-input-wrapper {
      position: relative;
      width: 100%;
      height: 72px;
      margin-bottom: 24px;
    }

    .cube-face-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: var(--neo-border);
      box-shadow: var(--neo-shadow);
      border-radius: 20px;
      background-color: var(--bg-card-ui);
      z-index: 1;
      transition: all 0.2s;
    }

    .cube-input {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 2rem;
      color: var(--text-color);
      text-align: center;
      z-index: 10;
      position: relative;
    }

    .cube-input-wrapper:focus-within .cube-face-bg {
      box-shadow: var(--neo-shadow-small);
      transform: translate(2px, 2px);
    }

    .obsidian-btn {
      background-color: var(--color-lime);
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-small);
      border-radius: 18px;
      padding: 16px 40px;
      width: 100%;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      color: #000000;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      transition: all 0.15s ease;
    }

    .obsidian-btn:hover {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px #000;
    }

    /* ─── SCREEN 3: DISCOVER DECK SWIPE ─── */
    #screen-discover {
      background-color: var(--bg-screen);
      justify-content: space-between;
    }

    .discover-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 12px;
    }

    .discover-header h2 {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--text-color);
    }

    .settings-trigger {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 2px 2px 0px #000;
      transition: all 0.15s;
    }

    .settings-trigger:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    .header-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .fullscreen-trigger {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 2px 2px 0px #000;
      transition: all 0.15s;
    }

    .fullscreen-trigger:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    /* Filter sliding drawer */
    .filter-drawer {
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      background: var(--bg-card-ui);
      color: var(--text-color);
      border-bottom: var(--neo-border);
      padding: 24px 20px;
      z-index: 100;
      transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 0px rgba(0, 0, 0, 0.15);
    }

    .filter-drawer.open {
      top: 0;
    }

    .filter-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .filter-drawer-header h3 {
      font-size: 1.15rem;
      font-weight: 800;
    }

    .filter-close {
      cursor: pointer;
      font-size: 1.5rem;
      font-weight: 800;
    }

    .drawer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-height: 400px;
      overflow-y: auto;
      padding-bottom: 8px;
    }

    .filter-drawer.uni .filter-prog-only {
      display: none !important;
    }

    .filter-drawer.prog .filter-uni-only {
      display: none !important;
    }

    /* CARD DECK CONTAINER */
    .card-deck-container {
      width: 100%;
      flex: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16px;
    }

    .tinder-card {
      position: absolute;
      width: 100%;
      height: 100%;
      max-height: 500px;
      border-radius: 28px;
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-large);
      display: flex;
      flex-direction: column;
      padding: 22px 20px;
      cursor: grab;
      user-select: none;
      transform-origin: 50% 100%;
      will-change: transform, opacity;
      z-index: 2;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
      color: #000000;
    }

    .tinder-card:active {
      cursor: grabbing;
    }

    /* Stacked card layers */
    .tinder-card.card-back-1 {
      transform: scale(0.94) translateY(18px) rotate(-1.5deg);
      opacity: 0.9;
      z-index: 1;
      pointer-events: none;
    }

    .tinder-card.card-back-2 {
      transform: scale(0.88) translateY(32px) rotate(1deg);
      opacity: 0.7;
      z-index: 0;
      pointer-events: none;
    }

    /* Swipe action stamps */
    .card-badge {
      position: absolute;
      top: 36px;
      padding: 8px 16px;
      border-radius: 12px;
      border: var(--neo-border);
      font-weight: 800;
      font-size: 1.6rem;
      letter-spacing: 1px;
      opacity: 0;
      transform: rotate(-10deg);
      pointer-events: none;
      z-index: 10;
      transition: opacity 0.15s;
    }

    .card-badge-like {
      right: 28px;
      background-color: var(--color-lime);
      box-shadow: var(--neo-shadow-small);
      transform: rotate(10deg);
    }

    .card-badge-nope {
      left: 28px;
      background-color: var(--color-pink);
      box-shadow: var(--neo-shadow-small);
    }

    /* Card Layout Sections */
    .card-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 10px;
    }

    .uni-logo-svg {
      width: 54px;
      height: 54px;
      margin-bottom: 8px;
    }

    .card-top span.uni-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(0, 0, 0, 0.68);
      margin-bottom: 2px;
      font-weight: 700;
    }

    .card-top h3.uni-name {
      font-size: 1.1rem;
      font-weight: 800;
      line-height: 1.3;
      color: #000000;
    }

    .card-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-bottom: 12px;
    }

    .pyramid-glow-svg {
      width: 120px;
      height: 120px;
    }

    .prog-text-overlay {
      position: absolute;
      width: 100%;
      padding: 0 16px;
      text-align: center;
      font-weight: 800;
      font-size: 1.25rem;
      color: #000000;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      pointer-events: none;
      text-shadow: 2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff, -2px 2px 0px #ffffff;
    }

    .card-bottom {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .card-stat-pill {
      background: #ffffff;
      border: var(--neo-border-thin);
      border-radius: 12px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #000000;
    }

    .card-stat-label {
      font-size: 0.65rem;
      text-transform: uppercase;
      color: rgba(0, 0, 0, 0.65);
      font-weight: 700;
      margin-bottom: 2px;
    }

    .card-stat-value {
      font-weight: 700;
      font-size: 0.85rem;
      color: #000000;
    }

    .card-stat-pill.siralama-pill {
      grid-column: span 2;
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-small);
    }

    .card-stat-pill.siralama-pill .card-stat-value {
      font-size: 1.15rem;
      font-weight: 800;
    }

    /* Color coded states for rank pills */
    .card-stat-pill.siralama-pill.pill-risky {
      background-color: var(--color-pink);
    }

    .card-stat-pill.siralama-pill.pill-probable {
      background-color: var(--color-yellow);
    }

    .card-stat-pill.siralama-pill.pill-certain {
      background-color: var(--color-lime);
    }

    .card-stat-pill.siralama-pill.pill-neutral {
      background-color: #ffffff;
    }

    /* SWIPE ACTION BUTTONS */
    .discover-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      width: 100%;
      margin-bottom: 8px;
    }

    .discover-controls svg {
      stroke: currentColor;
    }

    .control-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-small);
      transition: all 0.15s ease;
    }

    .control-btn:hover {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px #000;
    }

    .btn-nope {
      width: 62px !important;
      height: 62px !important;
      background-color: var(--btn-nope-bg) !important;
      color: var(--btn-nope-color) !important;
      border: var(--neo-border) !important;
    }

    .btn-nope svg {
      width: 26px;
      height: 26px;
    }

    .btn-undo {
      width: 40px !important;
      height: 40px !important;
      background-color: var(--btn-undo-bg) !important;
      color: var(--btn-undo-color) !important;
      border: var(--neo-border-thin) !important;
    }

    .btn-undo svg {
      width: 18px;
      height: 18px;
    }

    .btn-like {
      width: 62px !important;
      height: 62px !important;
      background-color: var(--btn-like-bg) !important;
      color: var(--btn-like-color) !important;
      border: var(--neo-border) !important;
    }

    .btn-like svg {
      width: 26px;
      height: 26px;
      stroke: none !important;
      fill: currentColor;
    }

    .btn-profile {
      width: 48px !important;
      height: 48px !important;
      background-color: var(--btn-profile-bg) !important;
      color: var(--btn-profile-color) !important;
      border: var(--neo-border-thin) !important;
    }

    .btn-profile svg {
      width: 20px;
      height: 20px;
    }

    .btn-repost {
      width: 48px !important;
      height: 48px !important;
      background-color: var(--btn-repost-bg) !important;
      color: var(--btn-repost-color) !important;
      border: var(--neo-border-thin) !important;
    }

    .btn-repost svg {
      width: 20px;
      height: 20px;
    }

    .repost-sticker {
      position: absolute;
      top: -8px;
      left: 12px;
      background-color: var(--color-lime);
      color: #000;
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 8px;
      padding: 2px 6px;
      font-size: 0.62rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 4px;
      z-index: 10;
    }

    .control-label {
      font-size: 0.7rem;
      color: var(--text-color);
      font-weight: 700;
      margin-top: 4px;
    }

    /* ─── SCREEN: COMMUNITY TAB & SOCIAL MODALS ─── */
    .community-tab-btn {
      background-color: var(--bg-card-ui);
      color: var(--text-color);
    }

    .community-tab-btn.active {
      background-color: var(--color-lime) !important;
      color: #000000 !important;
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px #000;
    }

    .profile-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 11000;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }

    /* Candidate User Card inside Community list */
    .community-user-card {
      background-color: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: var(--neo-shadow-small);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      position: relative;
      transition: all 0.15s;
      color: #000000;
    }

    .username-link {
      color: var(--nav-active);
      text-decoration: underline;
      font-weight: 800;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .username-link:hover {
      opacity: 0.8;
    }

    .community-user-card:hover {
      transform: translateY(2px);
      box-shadow: 4px 2px 0px #000;
    }

    .community-follow-btn {
      padding: 6px 12px;
      font-weight: 800;
      font-size: 0.72rem;
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.1s;
    }

    .community-follow-btn.btn-follow-action {
      background-color: var(--color-lime);
    }

    .community-follow-btn.btn-unfollow-action {
      background-color: #e0e0e0;
    }

    .social-stat-box:hover {
      background-color: #f0f0f0;
      transform: translateY(-2px);
    }

    body[data-theme="dark"] .community-tab-btn {
      color: var(--text-color);
    }

    body[data-theme="dark"] .community-tab-btn.active {
      color: #000;
    }

    body[data-theme="dark"] .community-user-card {
      background-color: var(--bg-card-ui);
      color: var(--text-color);
    }

    body[data-theme="dark"] .community-follow-btn.btn-unfollow-action {
      background-color: #555;
      color: #fff;
    }

    body[data-theme="dark"] .liked-item-card {
      color: var(--text-color);
    }

    /* ─── SCREEN: PROFILE PAGE ─── */
    /* ─── SCREEN: PROFILE PAGE (Instagram Neo-Brutalist Redesign) ─── */
    .profile-scroll-wrap {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .instagram-profile-header {
      padding: 4px 0 12px 0;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 16px;
    }

    .instagram-username-bar {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .instagram-username-bar span:first-child {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--text-color);
    }

    .instagram-verified-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .verified-svg {
      width: 22px;
      height: 22px;
      filter: drop-shadow(1.5px 1.5px 0px #000);
    }

    .instagram-header-grid {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }

    .instagram-avatar-col {
      display: flex;
      justify-content: center;
    }

    .profile-avatar-wrapper {
      padding: 4px;
      background: linear-gradient(45deg, var(--color-lime), var(--color-pink));
      border: var(--neo-border-thin);
      box-shadow: var(--neo-shadow-small);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 82px;
      height: 82px;
    }

    .profile-avatar-sphere {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: var(--color-blue);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .instagram-stats-col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      text-align: center;
    }

    .instagram-stat-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 12px;
      padding: 8px 2px;
    }

    .instagram-stat-val {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-color);
      line-height: 1.1;
    }

    .instagram-stat-label {
      font-size: 0.62rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .instagram-bio-block {
      margin-bottom: 16px;
      text-align: left;
    }

    .instagram-fullname {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-color);
    }

    .instagram-category {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .instagram-bio-text {
      font-size: 0.85rem;
      color: var(--text-color);
      line-height: 1.4;
      background-color: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 500;
      white-space: pre-wrap;
    }

    .instagram-buttons-row {
      display: grid;
      grid-template-columns: 1fr 1.1fr 70px;
      gap: 6px;
      margin-bottom: 20px;
    }

    .instagram-btn {
      background-color: var(--bg-card-ui);
      color: var(--text-color);
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 12px;
      padding: 10px 4px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 0.78rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.15s;
    }

    .instagram-btn:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    .instagram-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 0px 0px 0px #000;
    }

    .instagram-btn.btn-edit {
      background-color: var(--color-blue);
      color: #000000 !important;
    }

    .instagram-btn.btn-sync {
      background-color: var(--color-lime);
      color: #000000 !important;
    }

    .instagram-btn.btn-logout {
      background-color: var(--color-pink);
      color: #000000 !important;
    }

    /* Tabs block */
    .instagram-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 2px solid var(--border-color);
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 14px;
    }

    .instagram-tab-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      padding: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s, border-bottom 0.2s;
    }

    .instagram-tab-btn.active {
      color: var(--text-color);
      border-bottom: 3px solid var(--text-color);
    }

    /* Content panes */
    .instagram-pane {
      display: none;
    }

    .instagram-pane.active {
      display: block;
    }

    /* Grid layout */
    .instagram-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 4px 2px;
    }

    .instagram-grid-item {
      position: relative;
      aspect-ratio: 1 / 1;
      border: var(--neo-border-thin);
      box-shadow: 3px 3px 0px #000;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .instagram-grid-item:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0px #000;
    }

    .instagram-grid-item:active {
      transform: translate(2px, 2px);
      box-shadow: 0px 0px 0px #000;
    }

    .instagram-grid-svg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .instagram-grid-svg svg {
      width: 48px;
      height: 48px;
    }

    .instagram-grid-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      padding: 6px;
      text-align: center;
      pointer-events: none;
    }

    .instagram-grid-item:hover .instagram-grid-overlay {
      opacity: 1;
    }

    .instagram-grid-overlay-uni {
      font-size: 0.6rem;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 2px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .instagram-grid-overlay-prog {
      font-size: 0.55rem;
      font-weight: 600;
      opacity: 0.9;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 4px;
    }

    .instagram-grid-overlay-rank {
      font-size: 0.65rem;
      font-weight: 800;
      color: var(--color-lime);
    }

    /* Parameters cards */
    .instagram-param-card {
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: 3px 3px 0px #000;
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 12px;
      text-align: left;
    }

    .param-card-header {
      font-size: 0.7rem;
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .param-card-body {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-color);
    }

    /* Theme settings */
    .instagram-theme-card {
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: 3px 3px 0px #000;
      border-radius: 14px;
      padding: 14px;
      text-align: left;
    }

    .instagram-theme-card .theme-card-title {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      margin-bottom: 10px;
    }

    /* Modal Overlay */
    .neo-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(4px);
    }

    .neo-modal-container {
      width: 100%;
      max-width: 380px;
      background: var(--bg-screen);
      border: var(--neo-border);
      box-shadow: var(--neo-shadow);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: neoPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }

    .neo-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 2px solid var(--border-color);
      background: var(--color-blue);
    }

    .neo-modal-header span {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 1.2rem;
      color: #000;
    }

    .neo-modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      font-weight: 800;
      cursor: pointer;
      color: #000;
    }

    .neo-modal-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .modal-form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
    }

    .modal-form-group label {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      color: var(--text-color);
    }

    .modal-form-group-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .neo-modal-footer {
      display: flex;
      gap: 8px;
      padding: 14px 16px;
      border-top: 2px solid var(--border-color);
      background: var(--bg-card-ui);
    }

    .neo-modal-btn {
      flex: 1;
      padding: 10px;
      border: var(--neo-border-thin);
      box-shadow: 2px 2px 0px #000;
      border-radius: 12px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .neo-modal-btn:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    .neo-modal-btn.btn-save {
      background-color: var(--color-lime);
      color: #000;
    }

    .neo-modal-btn.btn-cancel {
      background-color: var(--bg-card-ui);
      color: var(--text-color);
    }

    @keyframes neoPopIn {
      0% {
        transform: scale(0.95);
        opacity: 0;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* ─── SCREEN: LIKES MATCHES PAGE ─── */
    .likes-scroll-wrap {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .likes-header-title {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .likes-header-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-bottom: 16px;
      font-weight: 700;
    }

    .likes-list-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .liked-item-card {
      background-color: var(--bg-card-ui);
      border: var(--neo-border-thin);
      box-shadow: var(--neo-shadow-small);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      cursor: pointer;
      transition: all 0.15s;
      color: #000000;
    }

    .liked-item-card:hover {
      transform: translateY(2px);
      box-shadow: 4px 2px 0px #000;
    }

    .liked-item-info {
      flex: 1;
      padding-right: 8px;
    }

    .liked-item-uni {
      font-size: 0.75rem;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 700;
      margin-bottom: 2px;
    }

    .liked-item-prog {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--text-color);
      line-height: 1.3;
    }

    .liked-item-meta {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }

    .liked-meta-badge {
      font-size: 0.65rem;
      padding: 2px 6px;
      border-radius: 6px;
      background: var(--bg-screen);
      border: var(--neo-border-thin);
      color: var(--text-color);
      font-weight: 700;
    }

    .liked-meta-badge.pt-SAY,
    .liked-meta-badge.pt-EA,
    .liked-meta-badge.pt-SÖZ,
    .liked-meta-badge.pt-DİL {
      color: #000000 !important;
    }

    .liked-meta-badge.pt-SAY {
      background-color: var(--color-blue);
    }

    .liked-meta-badge.pt-EA {
      background-color: var(--color-lime);
    }

    .liked-meta-badge.pt-SÖZ {
      background-color: var(--color-pink);
    }

    .liked-meta-badge.pt-DİL {
      background-color: var(--color-orange);
    }

    .liked-item-rank {
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      border: var(--neo-border-thin);
      border-radius: 10px;
      padding: 4px 8px;
      background-color: #ffffff;
      margin-right: 8px;
    }

    .liked-rank-label {
      font-size: 0.55rem;
      color: var(--text-muted);
      text-transform: uppercase;
      font-weight: 700;
    }

    .liked-rank-val {
      font-weight: 800;
      font-size: 0.85rem;
    }

    .liked-item-rank.pill-risky {
      background-color: var(--color-pink);
    }

    .liked-item-rank.pill-probable {
      background-color: var(--color-yellow);
    }

    .liked-item-rank.pill-certain {
      background-color: var(--color-lime);
    }

    .liked-item-rank.pill-neutral {
      background-color: #ffffff;
    }

    /* Force dark text for colored ranking pills in both themes */
    .pill-risky .card-stat-label,
    .pill-probable .card-stat-label,
    .pill-certain .card-stat-label,
    .pill-risky .liked-rank-label,
    .pill-probable .liked-rank-label,
    .pill-certain .liked-rank-label {
      color: rgba(0, 0, 0, 0.65) !important;
    }

    .pill-risky .card-stat-value,
    .pill-probable .card-stat-value,
    .pill-certain .card-stat-value,
    .pill-risky .liked-rank-val,
    .pill-probable .liked-rank-val,
    .pill-certain .liked-rank-val {
      color: #000000 !important;
    }

    /* Theme-aware styling for neutral ranking pills */
    body[data-theme="dark"] .card-stat-pill.pill-neutral,
    body[data-theme="dark"] .liked-item-rank.pill-neutral {
      background-color: var(--bg-screen) !important;
    }

    body[data-theme="dark"] .card-stat-pill.pill-neutral .card-stat-label {
      color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .card-stat-pill.pill-neutral .card-stat-value {
      color: var(--text-color) !important;
    }

    body[data-theme="dark"] .liked-item-rank.pill-neutral .liked-rank-label {
      color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .liked-item-rank.pill-neutral .liked-rank-val {
      color: var(--text-color) !important;
    }

    .liked-remove-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-pink);
      border: var(--neo-border-thin);
      cursor: pointer;
      box-shadow: 2px 2px 0px #000;
      transition: all 0.15s;
    }

    .liked-remove-btn:hover {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0px #000;
    }

    .liked-remove-btn svg {
      width: 14px;
      height: 14px;
      fill: #000000;
    }

    .likes-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 300px;
      text-align: center;
      color: #7ad36e;
    }

    .likes-empty-state svg {
      width: 50px;
      height: 50px;
      fill: #7ad36e;
      margin-bottom: 12px;
    }

    /* ─── DROPDOWN MULTISELECT STYLES (SOFT NEO STYLE) ─── */
    .filter-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      /* Harfler tombul olduğu için dikey boşluğu hafif artırdık */
      width: 100%;
    }

    .filter-field label {
      font-family: 'Coiny', system-ui, sans-serif;
      /* Cartoon temasına uygun etiket */
      font-size: 0.8rem;
      font-weight: normal;
      /* Coiny zaten kalın */
      text-transform: uppercase;
      color: var(--text-color);
      letter-spacing: 0.05em;
    }

    .multiselect-container {
      position: relative;
    }

    .multiselect-trigger {
      background: var(--bg-screen);
      border: var(--neo-border-thin);
      border-radius: 18px;
      /* Daha yumuşak ve pofuduk kenarlar */
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: 0.85rem;
      font-weight: 800;
      /* Daha dolgun dursun */
      transition: all 0.15s ease-in-out;
    }

    .multiselect-trigger:hover {
      /* Sert köşeli gölge yerine yumuşatılmış ama belirgin neo gölge */
      box-shadow: 3px 3px 0px #000;
      transform: translate(-1px, -1px);
    }

    .multiselect-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-color);
    }

    .multiselect-arrow {
      font-size: 0.8rem;
      transition: transform 0.2s ease;
      color: var(--text-color);
    }

    .multiselect-container.open .multiselect-arrow {
      transform: rotate(180deg);
    }

    .multiselect-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 100%;
      background: var(--bg-card-ui);
      border: var(--neo-border-thin);
      border-radius: 20px;
      /* Açılır kutunun alt köşeleri de pofuduk */
      z-index: 110;
      box-shadow: 4px 4px 0px #000;
      padding: 10px;
    }

    .multiselect-container.open .multiselect-dropdown {
      display: block;
    }

    .multiselect-search {
      width: 100%;
      padding: 10px 12px;
      border: var(--neo-border-thin);
      border-radius: 12px;
      /* Arama kutusu yumuşatıldı */
      font-family: 'Nunito', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 8px;
      outline: none;
      background: var(--bg-screen);
      color: var(--text-color);
      transition: all 0.15s;
    }

    .multiselect-search:focus {
      border-color: var(--color-lime);
      box-shadow: 2px 2px 0px #000;
    }

    .multiselect-options {
      max-height: 160px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-right: 4px;
      /* Scrollbar harflere yapışmasın diye */
    }

    /* ─── BU ALANDAKİ SCROLLBAR ÖZELLEŞTİRMESİ ─── */
    .multiselect-options::-webkit-scrollbar {
      width: 8px;
    }

    .multiselect-options::-webkit-scrollbar-track {
      background: transparent;
      /* Arka planı temizledik, sırıtmasın */
    }

    .multiselect-options::-webkit-scrollbar-thumb {
      background: var(--color-lime);
      border-radius: 10px;
    }

    .multiselect-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      /* Seçeneklerin hover alanları yumuşatıldı */
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-color);
      transition: background 0.1s;
    }

    .multiselect-option:hover {
      background-color: rgba(124, 140, 245, 0.15);
    }

    /* Pofuduk Checkbox tasarımı için tarayıcı rengini ezdik */
    .multiselect-option input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--color-lime);
      /* Aktif olduğundaki jöle rengi */
      cursor: pointer;
    }

    .button-group-field {
      display: flex;
      gap: 12px;
      margin-top: 12px;
    }

    .filter-clear-btn {
      border: var(--neo-border-thin);
      background: var(--bg-screen);
      color: var(--text-color);
      border-radius: 16px;
      /* Butonlar tamamen yumuşatıldı */
      padding: 12px;
      font-family: 'Coiny', system-ui, sans-serif;
      /* Buton metinlerine cartoon havası */
      font-size: 0.8rem;
      cursor: pointer;
      flex: 1;
      transition: all 0.15s ease-in-out;
    }

    .filter-clear-btn:hover {
      background: #f1f5f9;
      box-shadow: 3px 3px 0px #000;
      transform: translate(-1px, -1px);
    }

    .filter-search-btn {
      border: var(--neo-border-thin);
      background: var(--color-lime);
      color: #000;
      /* Buton içi yazı rengi okunabilirlik için koyu yapıldı */
      border-radius: 16px;
      padding: 12px;
      font-family: 'Coiny', system-ui, sans-serif;
      font-size: 0.8rem;
      cursor: pointer;
      flex: 1;
      transition: all 0.15s ease-in-out;
    }

    .filter-search-btn:hover {
      box-shadow: 3px 3px 0px #000;
      transform: translate(-1px, -1px);
    }

    /* ─── DETAILS MODAL REDESIGNED (NEO STYLE) ─── */
    .prog-modal {
      display: none;
      position: absolute;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: var(--bg-modal);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      justify-content: center;
      align-items: center;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: scale(0.97);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .prog-modal-content {
      background: var(--bg-card-ui);
      color: var(--text-color);
      padding: 16px 18px;
      border: var(--neo-border);
      width: 92%;
      max-height: 94%;
      overflow-y: auto;
      border-radius: 28px;
      box-shadow: var(--neo-shadow-large);
      position: relative;
    }

    .prog-modal-close {
      color: var(--text-color);
      position: absolute;
      top: 14px;
      right: 18px;
      font-size: 28px;
      font-weight: 800;
      cursor: pointer;
    }

    .prog-tag {
      display: inline-flex;
      align-items: center;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 8px;
      background: var(--bg-screen);
      border: var(--neo-border-thin);
      color: var(--text-color);
    }

    .prog-tag.pt-SAY {
      background-color: var(--color-blue);
    }

    .prog-tag.pt-EA {
      background-color: var(--color-lime);
    }

    .prog-tag.pt-SÖZ {
      background-color: var(--color-pink);
    }

    .prog-tag.pt-DİL {
      background-color: var(--color-orange);
    }
    
    .prog-tag.pt-SAY,
    .prog-tag.pt-EA,
    .prog-tag.pt-SÖZ,
    .prog-tag.pt-DİL {
      color: #000000 !important;
    }

    .modal-hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .hero-stat-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--bg-screen);
      border: var(--neo-border-thin);
      text-align: center;
      color: var(--text-color);
    }

    .hero-stat-label {
      font-size: 0.65rem;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .hero-stat-value {
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--text-color);
    }

    /* Koyu tema uyumlu stat box vurgu sınıfları */
    .hero-stat-box.bg-pink {
      background-color: var(--color-pink) !important;
    }
    .hero-stat-box.bg-yellow {
      background-color: var(--color-yellow) !important;
    }
    .hero-stat-box.bg-lime {
      background-color: var(--color-lime) !important;
    }
    .hero-stat-box.bg-orange {
      background-color: var(--color-orange) !important;
    }
    
    .hero-stat-box.bg-pink .hero-stat-label,
    .hero-stat-box.bg-yellow .hero-stat-label,
    .hero-stat-box.bg-lime .hero-stat-label,
    .hero-stat-box.bg-orange .hero-stat-label {
      color: #000000 !important;
    }
    .hero-stat-box.bg-pink .hero-stat-value,
    .hero-stat-box.bg-yellow .hero-stat-value,
    .hero-stat-box.bg-lime .hero-stat-value,
    .hero-stat-box.bg-orange .hero-stat-value {
      color: #000000 !important;
    }

    .net-grids-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .net-grid-rows {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
    }

    .net-item-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bg-screen);
      border: var(--neo-border-thin);
      border-radius: 10px;
      padding: 5px 8px;
    }

    .net-item-label {
      font-size: 0.65rem;
      color: var(--text-muted);
      font-weight: 700;
    }

    .net-item-val {
      font-weight: 800;
      font-size: 0.9rem;
      color: var(--text-color);
    }

    /* ─── BOTTOM NAVIGATION DOCK (NEO STYLE) ─── */
    .bottom-nav-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 76px;
      background: var(--bg-screen);
      border-top: var(--neo-border);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 100;
      padding: 0 12px 10px;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 100%;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.2s;
      background: transparent;
      border: none;
      outline: none;
      font-family: 'Nunito', sans-serif;
    }

    .nav-item svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
      transition: transform 0.2s;
    }

    .nav-item span {
      font-size: 0.65rem;
      margin-top: 4px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .nav-item.active {
      color: var(--nav-active);
    }

    .nav-item.active svg {
      transform: scale(1.15) translateY(-2px);
    }

    .nav-item.nav-discover svg {
      width: 28px;
      height: 28px;
    }

    .nav-item.nav-discover.active svg {
      animation: butterflyPulse 2s infinite ease-in-out;
    }

    @keyframes butterflyPulse {

      0%,
      100% {
        transform: scale(1.1);
      }

      50% {
        transform: scale(1.2) rotate(4deg);
      }
    }

    /* 1. Kaydırma çubuğunun genel genişliği */
    ::-webkit-scrollbar {
      width: 12px;
      /* Çok kaba durmaması için genişliği ideal bir seviyeye çektik */
      height: 12px;
      /* Yatay scrollbar için genişlik */
    }

    /* 2. Kaydırma çubuğunun arkasındaki yol (Track) */
    ::-webkit-scrollbar-track {
      background: #1a1d24;
      /* Arka plandaki koyu renk tonunla uyumlu bir renk */
      border-radius: 20px;
      /* Kenarları tamamen tombul ve yuvarlak yapıyoruz */
    }

    /* 3. Hareket eden kaydırak çubuğu (Thumb) */
    ::-webkit-scrollbar-thumb {
      background: var(--color-lime);
      /* İstersen burayı var(--color-pink) de yapabilirsin */
      border: 3px solid #1a1d24;
      /* Çubuğun etrafına yol renginde boşluk bırakarak daha tatlı durmasını sağlar */
      border-radius: 20px;
      /* Kaydırağı da pofuduk ve yuvarlak yapıyoruz */
    }

    /* 4. Mouse ile üzerine gelindiğinde (Hover durumu) */
    ::-webkit-scrollbar-thumb:hover {
      background: #c5ee4b;
      /* Üzerine gelindiğinde rengini hafifçe parlatıyoruz veya değiştiriyoruz */
    }

    /* 5. Varsa alt ve üstteki o eski nesil ok butonlarını tamamen gizliyoruz */
    ::-webkit-scrollbar-button {
      display: none;
    }

    /* Neo-brutalist custom profile inputs */
    .profile-input-field {
      width: 100%;
      padding: 10px 14px;
      border-radius: 12px;
      border: var(--neo-border-thin);
      background: var(--bg-card-ui);
      color: var(--text-color);
      font-family: 'Nunito', sans-serif;
      font-weight: 600;
      box-sizing: border-box;
      outline: none;
      transition: transform 0.1s, box-shadow 0.1s;
    }

    .profile-input-field:focus {
      transform: translate(-1px, -1px);
      box-shadow: 2px 2px 0px #000;
    }

    .profile-select-field {
      width: 100%;
      padding: 10px;
      border-radius: 12px;
      border: var(--neo-border-thin);
      background: var(--bg-card-ui);
      color: var(--text-color);
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      box-sizing: border-box;
      height: 42px;
      outline: none;
      cursor: pointer;
    }

    .profile-select-field:focus {
      border-color: #000;
    }

    /* Fluffy Neo-brutalist toast alert */
    #neo-toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      opacity: 0;
      background-color: var(--color-lime);
      color: #000;
      border: var(--neo-border);
      box-shadow: var(--neo-shadow-small);
      padding: 12px 24px;
      border-radius: 12px;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      z-index: 10000;
      transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
      pointer-events: none;
    }

    /* Instagram Reels Dikey Akış Modu */
    #screen-discover.discover-vertical-mode {
      padding: 12px 12px 76px 12px !important;
    }

    #screen-discover.discover-vertical-mode .card-deck-container {
      margin-bottom: 0px !important;
      height: 100% !important;
      width: 100% !important;
    }

    #screen-discover.discover-vertical-mode .tinder-card {
      max-height: 100% !important;
      height: 100% !important;
      width: 100% !important;
      border-radius: 20px !important;
    }

    #screen-discover.discover-vertical-mode .discover-controls {
      position: absolute !important;
      right: 16px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      flex-direction: column !important;
      display: flex !important;
      gap: 16px !important;
      width: auto !important;
      z-index: 100 !important;
      margin-bottom: 0 !important;
      pointer-events: auto !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }

    #screen-discover.discover-vertical-mode .discover-controls .control-btn {
      width: 50px !important;
      height: 50px !important;
      background-color: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 2px 2px 0px #000 !important;
      border: var(--neo-border-thin) !important;
    }

    #screen-discover.discover-vertical-mode .discover-controls .control-label {
      color: #ffffff !important;
      font-weight: 800 !important;
      font-size: 0.65rem !important;
      text-shadow: 1px 1px 3px #000, -1px -1px 3px #000, 1px -1px 3px #000, -1px 1px 3px #000 !important;
      margin-top: 4px !important;
    }

    /* Reddet ve Geri Al tuşlarını dikey akış modunda gizle */
    #screen-discover.discover-vertical-mode #wrapper-btn-undo,
    #screen-discover.discover-vertical-mode #wrapper-btn-nope {
      display: none !important;
    }

    /* Tuşları yukardan aşağıya; Beğen (1), Repost (2), İncele (3) olarak sırala */
    #screen-discover.discover-vertical-mode #wrapper-btn-like {
      order: 1 !important;
    }
    #screen-discover.discover-vertical-mode #wrapper-btn-repost {
      order: 2 !important;
    }
    #screen-discover.discover-vertical-mode #wrapper-btn-profile {
      order: 3 !important;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }