/* =====================================================
   SAATDURUM — MOBİL UYGULAMA KATMANI (mobile.css)
   =====================================================
   Bu dosya, mevcut masaüstü tasarımını BOZMADAN, mobil
   (telefon, dikey) görünüm için üzerine yazan (override)
   en yüksek öncelikli katmandır. Diğer tüm CSS dosyalarından
   SONRA yüklenir.

   Kapsam:
   1) Genel güvenlik ağı (taşma / overflow önleme)
   2) Gerçek görünür yükseklik ve çentik/safe-area desteği
   3) Üst bar (header) & Mükemmel Dairesel İkon Butonları
   4) Alt sekme çubuğu (3-buton bottom nav)
   5) Saat Popup Alt Menüsü (Floating Tools Popover)
   6) Geri Sayım manuel giriş satırı düzeltmesi
   7) Kart / grid / modal / studio drawer mobil ince ayarları
   8) Takvim & Heatmap taşma koruması
   9) Dairesel Buton Geometri & Touch Target Koruması (Asla Ovalleşmez)
   10) Yatay mod (landscape)
===================================================== */

/* ---------- 0) Gerçek viewport yüksekliği ---------- */
:root {
  --vh: 1vh;
  --sd-safe-top: env(safe-area-inset-top, 0px);
  --sd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sd-safe-left: env(safe-area-inset-left, 0px);
  --sd-safe-right: env(safe-area-inset-right, 0px);
  --sd-bottom-nav-h: 64px;
}

/* =====================================================
   1) GENEL GÜVENLİK AĞI — HİÇBİR ELEMAN EKRANDAN TAŞMASIN
===================================================== */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  max-width: 100%;
}

@media (max-width: 768px) {
  html, body {
    overscroll-behavior-y: contain;
  }

  #app {
    overflow-x: hidden;
  }

  .card, .panel, .panel-fullpage, .plan-modal-dialog, .studio-drawer,
  #studio-drawer, .online-modal-dialog, .auth-gate-card {
    max-width: 100vw;
    box-sizing: border-box;
  }

  .badge, .chip-btn, .tag, .cd-subject-tag, .plan-tag, [class*="-tag"], [class*="-badge"] {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* iOS otomatik zoom önleme */
  input, select, textarea {
    font-size: 16px !important;
  }

  .stepper-box input#cd-input {
    font-size: 20px !important;
  }
}

/* =====================================================
   2) SAYFA İSKELETİ — SAFE AREA + GERÇEK YÜKSEKLİK
===================================================== */
@media (max-width: 768px) {
  body {
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  #app {
    padding-top: calc(12px + var(--sd-safe-top));
    padding-left: calc(12px + var(--sd-safe-left));
    padding-right: calc(12px + var(--sd-safe-right));
    padding-bottom: calc(var(--sd-bottom-nav-h) + 20px + var(--sd-safe-bottom));
  }

  html.sd-standalone #app {
    padding-top: calc(20px + var(--sd-safe-top));
  }
}

/* =====================================================
   3) ÜST BAR (HEADER) & DAİRESEL İKON BUTONLARI
===================================================== */
@media (max-width: 768px) {
  header#site-header {
    width: 100%;
    max-width: 100%;
    margin-bottom: 14px;
    position: sticky;
    top: calc(0px + var(--sd-safe-top));
    z-index: 60;
    padding: 8px 2px;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header#site-header .logo {
    font-size: 16px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header-actions {
    gap: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .icon-btn span:not(.notif-badge-pill) {
    display: none !important;
  }

  /* Mükemmel daire garantisi: width === height, aspect-ratio: 1 */
  .icon-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }

  .icon-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .studio-trigger-btn {
    background: var(--accent-dim, rgba(148, 163, 184, 0.15));
    border-color: var(--border-hv);
  }

  /* Plan, Hatırlatıcılar, Çevrimiçi ve Profil sayfalarında Odak Butonunu mobilde tamamen gizle */
  body.tab-plan #btn-focus,
  body.tab-reminders #btn-focus,
  body.tab-online #btn-focus,
  body.tab-profile #btn-focus,
  body.tab-sohbet #btn-focus,
  body:has(#panel-plan.active) #btn-focus,
  body:has(#panel-reminders.active) #btn-focus,
  body:has(#panel-online.active) #btn-focus,
  body:has(#panel-profile.active) #btn-focus,
  body:has(#panel-sohbet.active) #btn-focus {
    display: none !important;
  }

  /* Çevrimiçi dışındaki sayfalarda (Saat, Kronometre, Sayaç, Plan, Hatırlatıcılar) Bildirim Butonunu mobilde tamamen gizle */
  body.tab-clock #btn-online-notif,
  body.tab-stopwatch #btn-online-notif,
  body.tab-countdown #btn-online-notif,
  body.tab-plan #btn-online-notif,
  body.tab-reminders #btn-online-notif,
  body:not(.tab-online):not(:has(#panel-online.active)) #btn-online-notif {
    display: none !important;
  }
}

@media (max-width: 360px) {
  header#site-header .logo {
    font-size: 14px;
  }

  .icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* =====================================================
   4) ALT SEKME ÇUBUĞU (BOTTOM NAV) — 3 BUTON
===================================================== */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--bg-card, rgba(18, 18, 24, 0.9));
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 20px 20px 0 0;
    padding: 6px 10px calc(6px + var(--sd-safe-bottom)) 10px;
    box-shadow: var(--shadow, 0 -8px 32px rgba(0, 0, 0, 0.45));
    gap: 6px;
  }

  .mnav-btn {
    /* Faz 5: sabit %33.333 yerine esnek dağılım — böylece buton sayısı
       değiştiğinde (3'ten 4'e, Sohbet eklenince) CSS'i tekrar elle
       güncellemeye gerek kalmaz, her buton konteynerin genişliğini
       otomatik eşit paylaşır. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--text-s, rgba(235, 235, 245, 0.45));
    padding: 7px 4px;
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--sans, sans-serif);
    min-height: 52px;
    transition: color 0.2s ease, transform 0.15s ease;
    position: relative;
    isolation: isolate;
  }

  .mnav-btn.active::before {
    content: '';
    position: absolute;
    inset: 1px 3px;
    background: var(--accent-dim, rgba(148, 163, 184, 0.14));
    border: 1px solid var(--accent-dim, rgba(148, 163, 184, 0.22));
    border-radius: 14px;
    z-index: -1;
    animation: mnavPillIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes mnavPillIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
  }

  .mnav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mnav-btn svg {
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mnav-sub-indicator {
    position: absolute;
    top: -4px;
    right: -7px;
    font-size: 8px;
    line-height: 1;
    color: var(--accent, #94a3b8);
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .mnav-btn.popup-open .mnav-sub-indicator {
    transform: rotate(180deg);
    opacity: 1;
  }

  .mnav-btn span:not(.mnav-sub-indicator):not(.nav-live-dot) {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mnav-btn.active {
    color: var(--text-p, #fff);
  }

  .mnav-btn.active svg {
    transform: translateY(-1px) scale(1.08);
    color: var(--accent, #94a3b8);
  }

  .mnav-btn.active span:not(.mnav-sub-indicator):not(.nav-live-dot) {
    color: var(--accent, #94a3b8);
    font-weight: 700;
  }

  .mnav-btn.sd-pressed {
    transform: scale(0.92);
  }

  /* Mobil Alt Bar Canlı Çalışıyor Noktası (Saat / Çevrimiçi) */
  .mnav-live-dot {
    position: absolute;
    top: -2px;
    left: -4px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 8px rgba(16, 185, 129, 0.9);
    animation: pulseDot 1.5s infinite ease-in-out;
    z-index: 5;
    border: 1.5px solid var(--bg-card, #121218);
  }

  /* Mobil Popover Menü İçi Canlı Çalışıyor Noktası (Kronometre / Sayaç / Zamanlayıcı) */
  .mpop-live-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 8px rgba(16, 185, 129, 0.9);
    animation: pulseDot 1.5s infinite ease-in-out;
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
  }

  .nav-dropdown {
    display: none;
  }
}

/* =====================================================
   5) SAAT & ÇEVRİMİÇİ POPUP ALT MENÜSÜ (FLOATING TOOLS POPOVER)
===================================================== */
.clock-popup-backdrop,
.online-popup-backdrop {
  display: none;
}

.clock-popup-menu,
.online-popup-menu {
  display: none;
}

@media (max-width: 768px) {
  /* Arka plan karartma ve blur */
  .clock-popup-backdrop,
  .online-popup-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 210;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .clock-popup-backdrop.active,
  .online-popup-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Popover Floating Kart */
  .clock-popup-menu,
  .online-popup-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--sd-bottom-nav-h) + 10px + var(--sd-safe-bottom));
    max-width: 380px;
    margin: 0 auto;
    background: rgba(18, 18, 24, 0.95);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 220;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  }

  .clock-popup-menu.active,
  .online-popup-menu.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .clock-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
  }

  .clock-popup-hdr-title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-m, rgba(235, 235, 245, 0.55));
    text-transform: uppercase;
  }

  .clock-popup-close-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-s, rgba(235, 235, 245, 0.6));
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
  }

  .clock-popup-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .clock-popup-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .clock-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    color: var(--text-p, #ffffff);
    text-align: left;
    cursor: pointer;
    font-family: var(--sans, sans-serif);
    transition: all 0.18s ease;
    min-height: 48px;
  }

  .clock-popup-item:active {
    transform: scale(0.98);
  }

  .clock-popup-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .clock-popup-item.active {
    background: var(--accent-dim, rgba(148, 163, 184, 0.14));
    border-color: var(--accent, #94a3b8);
  }

  .clock-popup-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-p, #fff);
    transition: background 0.18s ease, color 0.18s ease;
  }

  .clock-popup-item.active .clock-popup-icon-wrap {
    background: var(--accent, #94a3b8);
    color: #000;
  }

  .clock-popup-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .clock-popup-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-p, #ffffff);
    line-height: 1.2;
  }

  .clock-popup-sub {
    font-size: 11px;
    color: var(--text-s, rgba(235, 235, 245, 0.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .clock-popup-check {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent, #94a3b8);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.18s ease;
  }

  .clock-popup-item.active .clock-popup-check {
    opacity: 1;
    transform: scale(1);
  }

  /* Light & Litewhite Theme Popover Menu */
  body.light-theme .clock-popup-menu,
  body.theme-light .clock-popup-menu,
  [data-theme="light"] .clock-popup-menu,
  body.litewhite-theme .clock-popup-menu,
  body.theme-litewhite .clock-popup-menu,
  [data-theme="litewhite"] .clock-popup-menu,
  body.light-theme .online-popup-menu,
  body.theme-light .online-popup-menu,
  [data-theme="light"] .online-popup-menu,
  body.litewhite-theme .online-popup-menu,
  body.theme-litewhite .online-popup-menu,
  [data-theme="litewhite"] .online-popup-menu {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  body.light-theme .clock-popup-header,
  body.theme-light .clock-popup-header,
  [data-theme="light"] .clock-popup-header,
  body.litewhite-theme .clock-popup-header,
  body.theme-litewhite .clock-popup-header,
  [data-theme="litewhite"] .clock-popup-header {
    border-bottom-color: rgba(15, 23, 42, 0.08);
  }

  body.light-theme .clock-popup-hdr-title,
  body.theme-light .clock-popup-hdr-title,
  [data-theme="light"] .clock-popup-hdr-title,
  body.litewhite-theme .clock-popup-hdr-title,
  body.theme-litewhite .clock-popup-hdr-title,
  [data-theme="litewhite"] .clock-popup-hdr-title {
    color: var(--text-m, #64748b);
  }

  body.light-theme .clock-popup-close-btn,
  body.theme-light .clock-popup-close-btn,
  [data-theme="light"] .clock-popup-close-btn,
  body.litewhite-theme .clock-popup-close-btn,
  body.theme-litewhite .clock-popup-close-btn,
  [data-theme="litewhite"] .clock-popup-close-btn {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-s, #475569);
  }

  body.light-theme .clock-popup-close-btn:hover,
  body.theme-light .clock-popup-close-btn:hover,
  [data-theme="light"] .clock-popup-close-btn:hover,
  body.litewhite-theme .clock-popup-close-btn:hover,
  body.theme-litewhite .clock-popup-close-btn:hover,
  [data-theme="litewhite"] .clock-popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-p, #0f172a);
  }

  body.light-theme .clock-popup-item,
  body.theme-light .clock-popup-item,
  [data-theme="light"] .clock-popup-item,
  body.litewhite-theme .clock-popup-item,
  body.theme-litewhite .clock-popup-item,
  [data-theme="litewhite"] .clock-popup-item {
    background: rgba(15, 23, 42, 0.03);
    color: var(--text-p, #0f172a);
  }

  body.light-theme .clock-popup-item:hover,
  body.theme-light .clock-popup-item:hover,
  [data-theme="light"] .clock-popup-item:hover,
  body.litewhite-theme .clock-popup-item:hover,
  body.theme-litewhite .clock-popup-item:hover,
  [data-theme="litewhite"] .clock-popup-item:hover {
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.1);
  }

  body.light-theme .clock-popup-item.active,
  body.theme-light .clock-popup-item.active,
  [data-theme="light"] .clock-popup-item.active,
  body.litewhite-theme .clock-popup-item.active,
  body.theme-litewhite .clock-popup-item.active,
  [data-theme="litewhite"] .clock-popup-item.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--accent, #3b82f6);
  }

  body.light-theme .clock-popup-icon-wrap,
  body.theme-light .clock-popup-icon-wrap,
  [data-theme="light"] .clock-popup-icon-wrap,
  body.litewhite-theme .clock-popup-icon-wrap,
  body.theme-litewhite .clock-popup-icon-wrap,
  [data-theme="litewhite"] .clock-popup-icon-wrap {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-p, #0f172a);
  }

  body.light-theme .clock-popup-item.active .clock-popup-icon-wrap,
  body.theme-light .clock-popup-item.active .clock-popup-icon-wrap,
  [data-theme="light"] .clock-popup-item.active .clock-popup-icon-wrap,
  body.litewhite-theme .clock-popup-item.active .clock-popup-icon-wrap,
  body.theme-litewhite .clock-popup-item.active .clock-popup-icon-wrap,
  [data-theme="litewhite"] .clock-popup-item.active .clock-popup-icon-wrap {
    background: var(--accent, #3b82f6);
    color: #ffffff;
  }

  body.light-theme .clock-popup-title,
  body.theme-light .clock-popup-title,
  [data-theme="light"] .clock-popup-title,
  body.litewhite-theme .clock-popup-title,
  body.theme-litewhite .clock-popup-title,
  [data-theme="litewhite"] .clock-popup-title {
    color: var(--text-p, #0f172a);
  }

  body.light-theme .clock-popup-sub,
  body.theme-light .clock-popup-sub,
  [data-theme="light"] .clock-popup-sub,
  body.litewhite-theme .clock-popup-sub,
  body.theme-litewhite .clock-popup-sub,
  [data-theme="litewhite"] .clock-popup-sub {
    color: var(--text-s, #64748b);
  }
}

/* =====================================================
   6) GERİ SAYIM — MANUEL GİRİŞ & KONTROLLER
===================================================== */
@media (max-width: 480px) {
  .manual-stepper-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stepper-box {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .cd-set-btn {
    flex: 1 1 100%;
    width: 100%;
    height: 44px;
  }

  .subject-input-row {
    flex-wrap: wrap;
  }

  .subject-input-row input {
    flex: 1 1 100%;
    min-width: 0;
  }

  .sound-toggle-btn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .cd-live-adjust {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cd-quick-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-quick-chips .chip-btn {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
    padding: 10px 8px;
  }
}

@media (max-width: 360px) {
  .cd-quick-chips .chip-btn {
    font-size: 11.5px;
    padding: 9px 6px;
  }
}

/* =====================================================
   7) KART / GRID / MODAL / STUDIO — MOBİL İNCE AYAR
===================================================== */
@media (max-width: 640px) {
  .card {
    padding: 20px 14px;
    border-radius: 22px;
  }

  .cd-time, .sw-time {
    font-size: clamp(42px, 14vw, 64px) !important;
  }

  .time-big {
    font-size: clamp(52px, 16vw, 130px) !important;
    letter-spacing: clamp(-4px, -1vw, -2px) !important;
  }

  .grp-grid,
  .online-live-grid,
  .online-groups-grid,
  .online-friends-grid,
  .online-suggested-grid,
  .sd-room-live-grid {
    grid-template-columns: 1fr !important;
  }

  .online-achievements-grid-10,
  .online-achievements-grid,
  .online-stats-hero-grid,
  .online-hourly-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  }

  .online-dash-stats-grid,
  .online-profile-stats-bar,
  .plan-summary-counter-row,
  .plan-type-selector-bar,
  .profile-badges-grid,
  .grp-studicons-grid,
  .profile-stats-grid,
  .st-quarter-weeks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .st-hour-segments {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .st-cal-days-header-row,
  .st-cal-grid-cells,
  .sd-weekly-mini-grid,
  .plan-weekly-grid,
  .online-heatmap-grid-7,
  .heatmap-grid {
    gap: 3px !important;
  }

  .online-podium-grid {
    gap: 6px;
  }

  .st-stats-pills-row,
  .cd-quick-chips {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
  }
}

/* Modallar */
@media (max-width: 640px) {
  .plan-modal-backdrop,
  .online-modal-backdrop {
    z-index: 100000 !important;
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .plan-modal-dialog,
  .online-modal-dialog {
    width: 100%;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88dvh;
    padding-bottom: var(--sd-safe-bottom);
  }

  .plan-modal-actions,
  .online-modal-actions {
    padding-bottom: calc(12px + var(--sd-safe-bottom));
  }

  .auth-gate-card {
    max-width: 100%;
    margin: 0 auto;
  }

  #auth-gate-container {
    padding: calc(16px + var(--sd-safe-top)) 16px calc(16px + var(--sd-safe-bottom));
  }
}

/* Studio Drawer */
@media (max-width: 480px) {
  #studio-drawer {
    top: calc(8px + var(--sd-safe-top));
    height: calc(100dvh - 16px - var(--sd-safe-top) - var(--sd-safe-bottom));
    max-height: none;
  }

  .studio-footer {
    padding-bottom: calc(10px + var(--sd-safe-bottom));
  }
}

/* =====================================================
   8) TAKVİM & HEATMAP TAŞMA KORUMASI
===================================================== */
@media (max-width: 768px) {
  .online-heatmap-grid-7 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important;
  }

  .online-heatmap-day-cell {
    min-height: unset !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3px 2px !important;
    border-radius: 6px !important;
  }

  .online-heatmap-cell-num {
    font-size: clamp(8px, 2.5vw, 11px) !important;
  }

  .online-heatmap-cell-time {
    font-size: clamp(7px, 2vw, 9.5px) !important;
    white-space: nowrap;
  }

  .online-heatmap-nav-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .st-cal-heatmap-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 14px 12px 12px !important;
  }

  .st-cal-days-header-row,
  .st-cal-grid-cells {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important;
  }

  .st-heat-cell {
    aspect-ratio: 1 / 1 !important;
    border-radius: 5px !important;
  }

  .st-heat-day-num {
    font-size: clamp(9px, 2.8vw, 12px) !important;
  }

  .st-heat-hours-lbl {
    font-size: clamp(7px, 2vw, 9.5px) !important;
  }

  .st-cal-day-head-lbl {
    font-size: clamp(9px, 2.5vw, 11.5px) !important;
  }

  .st-cal-month-title {
    font-size: clamp(13px, 4vw, 16px) !important;
  }

  .st-period-month-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .st-period-month-days-grid {
    grid-template-columns: repeat(14, minmax(18px, 1fr)) !important;
    min-width: 260px;
  }

  .panel-fullpage,
  #sd-stats-view-wrap,
  #sd-timer-view-wrap,
  #sd-profile-view-wrap {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Çevrimiçi Zamanlayıcı — Mobil Kutu İçi Glassmorphism Parlama */
  .ypt-hero-card.is-studying {
    box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.2)),
                inset 0 0 25px -4px rgba(var(--timer-glow-rgb, 34, 197, 94), 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
}

/* =====================================================
   9) DAİRESEL BUTON GEOMETRİ & TOUCH TARGET KORUMASI
   Tüm dairesel butonlar dar ekranda kesinlikle OVALLEŞMEZ.
===================================================== */
@media (max-width: 768px) {
  /* Standart Dikdörtgen / Hap Butonlar için Min Yükseklik */
  .btn:not(.icon-btn):not(.step-btn):not(.round-btn),
  .chip-btn,
  .tab,
  .nav-dropdown-trigger,
  .plan-pill-filter,
  .studio-seg-btn {
    min-height: 44px;
  }

  .btn:not(.icon-btn):not(.step-btn):not(.round-btn) {
    font-size: 14px;
    padding: 10px 16px;
  }

  /* ── KESİN DAİRESEL BUTONLAR (Anti-Oval Kalkanı) ── */
  .icon-btn,
  .step-btn,
  .ypt-icon-btn,
  .ypt-info-btn,
  .ypt-hero-quick-btn,
  .ypt-date-arrow-btn,
  .plan-modal-close,
  .online-modal-close,
  .clock-popup-close-btn,
  .st-cal-month-arrow,
  .round-btn,
  [class*="-circle-btn"] {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Stepper Butonları (Örn: -5, -1, +1, +5) */
  .step-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
  }

  /* YPT / Online İkon Butonları */
  .ypt-icon-btn,
  .ypt-info-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
  }

  /* YPT Hero Hızlı Başlat Butonu */
  .ypt-hero-quick-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
  }

  /* YPT Oturum & Mola Sayacı */
  .ypt-hero-session-pill,
  .ypt-hero-break-pill {
    font-size: 11px !important;
    padding: 2.5px 8px !important;
  }

  /* Takvim / Gün Ok Butonları */
  .ypt-date-arrow-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  /* Modal Kapatma Butonları */
  .plan-modal-close,
  .online-modal-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
  }

  /* Kart ve panel araları ferahlığı */
  .card + .card,
  .panel + .panel {
    margin-top: 12px;
  }

  .chip-btn {
    padding: 10px 14px;
  }

  .section-sub {
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 20px;
    margin-bottom: 12px;
  }

  #app, .card, .mobile-bottom-nav,
  body * {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
  }

  input, textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], [contenteditable="true"] {
    -webkit-user-select: text;
    -webkit-touch-callout: default;
    user-select: text;
  }
}

/* =====================================================
   10) YATAY MOD (LANDSCAPE)
===================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-bottom-nav {
    padding-top: 4px;
    padding-bottom: 4px;
    --sd-bottom-nav-h: 50px;
  }

  .mnav-btn {
    min-height: 44px;
  }

  .mnav-btn span:not(.mnav-sub-indicator) {
    display: none;
  }

  .clock-popup-menu,
  .online-popup-menu {
    max-width: 340px;
    padding: 8px 10px;
  }

  .clock-popup-item {
    padding: 6px 10px;
    min-height: 40px;
  }

  #app {
    padding-bottom: calc(50px + 12px + var(--sd-safe-bottom));
  }
}

/* =====================================================
   11) PLAN SAYFASI MOBİL İNCE AYARLAR
===================================================== */
@media (max-width: 768px) {
  /* Üst başlık aksiyon butonları mobilde yuvarlak ikon butonlar */
  .plan-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .plan-header-actions {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .plan-header-actions .plan-btn-action,
  .plan-header-actions .plan-btn-add {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .plan-header-actions .plan-btn-action span,
  .plan-header-actions .plan-btn-add span {
    display: none !important;
  }

  .plan-header-actions .plan-btn-action svg,
  .plan-header-actions .plan-btn-add svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  /* Görev kartı aksiyon butonları ve sürükleme tutamacı mobilde rahat dokunulabilir */
  .plan-btn-card-action {
    width: 30px !important;
    height: 30px !important;
  }

  .plan-task-drag-handle {
    height: 20px !important;
    opacity: 0.65 !important;
  }

  /* Alt butonlar mobilde daha belirgin */
  .plan-add-bottom-btn {
    min-height: 52px !important;
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
  }

  .plan-paste-bottom-btn {
    min-height: 48px !important;
    font-size: 13px !important;
    margin-bottom: calc(var(--sd-bottom-nav-h) + 12px) !important;
  }

  /* Plan sidebar'ı mobilde compact tut */
  .plan-summary-card,
  .plan-quick-templates-card {
    padding: 12px !important;
  }

  /* Modal form mobilde tam genişlik */
  .plan-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ═════════════════════════════════════════
     BİLDİRİMLER MOBİL OPTİMİZASYONLARI
  ═════════════════════════════════════════ */
  .prof-notif-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .notif-modal-dialog {
    max-height: 85dvh !important;
  }

  .notif-modal-body {
    max-height: calc(85dvh - 120px) !important;
    -webkit-overflow-scrolling: touch;
  }

  .notif-item {
    padding: 10px 12px;
    gap: 10px;
  }
}

/* =====================================================
   12) ÇEVRİMİÇİ — MASA / ARKADAŞ KARTLARI (TEK SÜTUN)
   Kullanıcı listesini tek sütunlu, satır tabanlı, taranabilir
   bir yapıya çevirir. Öncelik: Avatar + İsim + Durum.
   İkincil bilgi (ders adı) karttan kaldırılıp profil
   detayında (grpOpenProfile) gösterilmeye bırakılır.
===================================================== */
@media (max-width: 768px) {
  .grp-desks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .grp-desk-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 16px !important;
    min-height: 64px;
  }

  .grp-desk-top-row {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
  }

  .grp-desk-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .grp-desk-name-wrap {
    min-width: 0;
    gap: 3px !important;
  }

  .grp-desk-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }

  .grp-desk-status {
    font-size: 12px !important;
  }

  /* Zaman kutusu: sağda kompakt, sabit genişlikte ikincil bilgi alanı */
  .grp-desk-time-box {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 72px;
    max-width: 110px;
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }

  /* Ders adı ikincil bilgidir: ana kartta göz yormasın, detayda görünsün */
  .grp-desk-subject-name {
    display: none !important;
  }

  .grp-desk-timer-val {
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }

  .grp-desk-idle-text {
    font-size: 10.5px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Kademe illüstrasyonu ve alt parıltı, kompakt satır düzeninde
     daha küçük ve sağa yaslı görünsün — kartı boğmasın. */
  .grp-desk-tier-illustration {
    width: 58px !important;
    height: 58px !important;
    right: -10px !important;
    bottom: -14px !important;
    opacity: 0.13 !important;
  }

  .grp-desk-glow-orb {
    width: 90% !important;
    bottom: -60% !important;
    opacity: 0.26 !important;
    filter: blur(18px) !important;
  }

  .grp-desk-card.is-studying .grp-desk-glow-orb {
    opacity: 0.42 !important;
  }
}

/* =====================================================
   13) PLAN GÖREV KARTLARI — GÖRSEL AĞIRLIK DENGESİ
   Tamamlanan görevleri sakinleştir, aktif görev başlığını
   birincil bilgi olarak öne çıkar.
===================================================== */
@media (max-width: 768px) {
  .plan-task-card {
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  .plan-task-title {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .plan-task-subtopic,
  .plan-task-notes-snippet {
    font-size: 12px !important;
    opacity: 0.72;
  }

  .plan-task-badges-row {
    gap: 5px !important;
    flex-wrap: wrap;
  }

  .plan-task-card.completed {
    opacity: 0.6 !important;
  }

  .plan-task-card.completed .plan-task-title {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    opacity: 0.85;
  }

  /* Sıra tutamacı ve düzenleme aksiyonları ikincil: küçük ve sakin */
  .plan-task-actions-row {
    gap: 4px !important;
  }
}

/* =====================================================
   14) BİLDİRİMLER BUTONU — ÜST BARDA THEME STUDIO YANINDA
   Bildirim butonu hem PC hem mobilde sadece "Çevrimiçi"
   sekmesindeyken görünür; diğer tüm sekmelerde gizlidir.
===================================================== */
.online-header-notif-btn {
  display: none !important;
  position: relative;
}

body.tab-online .online-header-notif-btn,
body:has(#panel-online.active) .online-header-notif-btn {
  display: inline-flex !important;
}

body.tab-clock .online-header-notif-btn,
body.tab-stopwatch .online-header-notif-btn,
body.tab-countdown .online-header-notif-btn,
body.tab-plan .online-header-notif-btn,
body.tab-reminders .online-header-notif-btn,
body:not(.tab-online):not(:has(#panel-online.active)) .online-header-notif-btn {
  display: none !important;
}

.online-header-notif-btn .notif-badge-pill {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* =====================================================
   15) ÇEVRİMİÇİ ÜST SEKME SEÇİCİSİ
   Mobilde üst menü gizlenir; çünkü alt menü popover (popup)
   üzerinden doğrudan seçilebilir hale getirilmiştir.
===================================================== */
@media (max-width: 768px) {
  .online-top-tabs-nav {
    display: none !important;
  }
}

/* =====================================================
   16) GRUP ODASI ÜST BAŞLIK & SEKMELERİ — KOMPAKT
   Aynı bilgiler (isim, kod, üye, çevrimiçi sayısı, kopyala,
   ayarlar, sekmeler) korunur; sadece daha az yer kaplayacak
   şekilde yeniden düzenlenir. Kopyala ve Ayarlar ikon-only
   hale gelerek başlıkla aynı satıra sığar.
===================================================== */
@media (max-width: 768px) {
  .grp-room-header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  .grp-room-title-box {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .grp-room-title-box > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .grp-room-title-box > div:last-child {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  .grp-room-title {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
  }

  /* Mobilde Kod yazısını ve Kopyala butonunu tamamen gizle — Ayarlardan kopyalanabilir */
  .grp-btn-copy-code,
  .grp-room-code-meta {
    display: none !important;
  }

  .grp-room-meta {
    font-size: 11px !important;
    gap: 5px !important;
    margin-top: 3px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
  }

  .grp-room-meta::-webkit-scrollbar {
    display: none !important;
  }

  .grp-meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 3px;
    vertical-align: 1px;
  }

  .grp-meta-dot.dot-online {
    background: #22c55e;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
  }

  .grp-meta-dot.dot-working {
    background: var(--accent, #f97316);
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
  }

  .grp-meta-sep {
    opacity: 0.35;
    font-size: 9px;
    margin: 0 1px;
  }

  .grp-btn-back {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* Ayarlar butonu: ikon-only dairesel buton, başlıkla aynı satırda */
  .grp-room-title-box > div:last-child .grp-btn-secondary,
  .grp-room-header .grp-btn-secondary {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    gap: 0 !important;
  }

  .grp-room-title-box > div:last-child .grp-btn-secondary svg,
  .grp-room-header .grp-btn-secondary svg {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  .grp-copy-label,
  .grp-settings-label {
    display: none !important;
  }

  /* Oda sekmeleri: tek satır, eşit genişlikte, ikon üstte etiket altta */
  .grp-room-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow-x: visible !important;
  }

  .grp-room-tab-btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 7px 2px !important;
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

    .grp-room-tab-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Grup Odası Sohbet Konteyneri - Geniş, ferah ve akıcı */
  #grp-tab-content-area:has(.grp-chat-wrap) {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 360px) {
  .grp-room-tab-btn {
    font-size: 9px !important;
  }
  .grp-room-title {
    font-size: 14px !important;
  }
}

/* =====================================================
   17) ÇALIŞMA ODALARIM (GRUP LİSTESİ) — MOBİL DÜZEN
   Başlık aksiyonları tam genişlikte eşit iki buton,
   oda kartlarında tıklama afordansı için sağda ok ikonu,
   keşfet filtreleri tek satır kaydırılabilir.
===================================================== */
@media (max-width: 640px) {
  .grp-header-bar {
    gap: 10px !important;
  }

  .grp-title {
    font-size: 18px !important;
  }

  .grp-header-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .grp-header-actions .grp-btn-secondary,
  .grp-header-actions .grp-btn-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 10px !important;
    font-size: 12.5px !important;
    min-height: 42px;
    border-radius: 12px !important;
  }

  /* Oda kartı: tıklama afordansı için sağda sabit ok ikonu */
  .grp-card {
    position: relative;
    padding: 14px 34px 14px 14px !important;
    border-radius: 14px !important;
  }

  .grp-card-chevron {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grp-text-s);
    opacity: 0.55;
  }

  .grp-card-title {
    font-size: 14.5px !important;
  }

  .grp-card-code-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* Keşfet bölümü: filtreler tek satırda, kenarlarda yumuşak solma */
  .grp-disc-title {
    font-size: 15.5px !important;
  }

  .grp-disc-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  }

  .grp-disc-filters::-webkit-scrollbar {
    display: none;
  }

  .grp-disc-filter-pill {
    flex-shrink: 0;
  }
}

/* =====================================================
   18) SOHBET TAM EKRAN MODU — UYGULAMA KATMANı OVERRIDE
   body.chat-fullscreen-open sınıfı JS ile eklenip kaldırılır.
   Alt navigasyon gizlenir, #app padding'i sıfırlanır, oda menüsü gizlenir.
===================================================== */
@media (max-width: 768px) {
  body.chat-fullscreen-open #app {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.chat-fullscreen-open .mobile-bottom-nav {
    display: none !important;
  }

  /* iOS over-scroll ve body scroll'u engelle */
  body.chat-fullscreen-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Sohbet sekmesindeyken üst site header'ı ve oda menüsü (Masalar/Sıralama/Yoklama/Sohbet) mobilde gizle */
  body.chat-fullscreen-open header#site-header,
  body.chat-fullscreen-open .grp-room-header,
  body.chat-fullscreen-open .grp-room-tabs,
  body.chat-fullscreen-open .grp-room-title-box,
  body.chat-fullscreen-open .online-top-tabs-nav,
  body.chat-fullscreen-open .online-subtabs-nav {
    display: none !important;
  }

  body.chat-fullscreen-open .grp-container {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
}

/* =====================================================
   19) AERO TEMA — MOBİL OPTİMİZASYON & ÇAKIŞMA ÖNLEME
   Mobilde renklerin üst üste binmesini, başlık taşmalarını ve
   fazla boşlukları önler; modern safir cam deneyimi sunar.
===================================================== */
@media (max-width: 768px) {
  body.aero-theme .card::before,
  body.aero-theme .card::after,
  body.theme-aero .card::before,
  body.theme-aero .card::after,
  [data-theme="aero"] .card::before,
  [data-theme="aero"] .card::after {
    display: none !important;
  }

  body.aero-theme #panel-clock > .card,
  body.theme-aero #panel-clock > .card,
  [data-theme="aero"] #panel-clock > .card {
    padding-top: 20px !important;
  }

  body.aero-theme .mobile-bottom-nav,
  body.theme-aero .mobile-bottom-nav,
  [data-theme="aero"] .mobile-bottom-nav {
    background: rgba(3, 14, 34, 0.88) !important;
    border-top: 1px solid rgba(0, 168, 255, 0.25) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  }

  body.aero-theme .mnav-btn,
  body.theme-aero .mnav-btn,
  [data-theme="aero"] .mnav-btn {
    color: #93c5fd !important;
  }

  body.aero-theme .mnav-btn.active,
  body.theme-aero .mnav-btn.active,
  [data-theme="aero"] .mnav-btn.active {
    color: #00a8ff !important;
    text-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
  }

  body.aero-theme .clock-popup-menu,
  body.aero-theme .online-popup-menu,
  body.theme-aero .clock-popup-menu,
  body.theme-aero .online-popup-menu,
  [data-theme="aero"] .clock-popup-menu,
  [data-theme="aero"] .online-popup-menu {
    background: rgba(4, 20, 48, 0.95) !important;
    border: 1px solid rgba(0, 168, 255, 0.35) !important;
    box-shadow: 0 20px 60px rgba(0, 10, 30, 0.8) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
  }

  body.aero-theme .clock-popup-item,
  body.theme-aero .clock-popup-item,
  [data-theme="aero"] .clock-popup-item {
    background: rgba(0, 168, 255, 0.08);
    border: 1px solid rgba(0, 168, 255, 0.18);
  }

  body.aero-theme .clock-popup-item:hover,
  body.theme-aero .clock-popup-item:hover,
  [data-theme="aero"] .clock-popup-item:hover,
  body.aero-theme .clock-popup-item.active,
  body.theme-aero .clock-popup-item.active,
  [data-theme="aero"] .clock-popup-item.active {
    background: rgba(0, 168, 255, 0.22);
    border-color: #00a8ff;
  }

  body.aero-theme .clock-popup-title,
  body.theme-aero .clock-popup-title,
  [data-theme="aero"] .clock-popup-title {
    color: #ffffff !important;
  }

  body.aero-theme .clock-popup-sub,
  body.theme-aero .clock-popup-sub,
  [data-theme="aero"] .clock-popup-sub {
    color: #93c5fd !important;
  }

  body.aero-theme .ypt-hero-card,
  body.theme-aero .ypt-hero-card,
  [data-theme="aero"] .ypt-hero-card {
    padding: 16px 18px !important;
  }

  body.aero-theme .ypt-subject-item,
  body.theme-aero .ypt-subject-item,
  [data-theme="aero"] .ypt-subject-item {
    background: rgba(4, 20, 48, 0.72) !important;
    border-color: rgba(0, 168, 255, 0.2) !important;
  }
}