/* ============================================================
   OtoDevi · Modern Theme Overlay
   ------------------------------------------------------------
   Velzon admin teması üzerine binen reskin katmanı.
   - DOM yapısı korundu (app.js bağlılıkları için)
   - Sadece görsel override + yeni component class’ları
   - Kağlıt karıştırmamak için tüm yeni sınıflar otd- prefix’li
   ============================================================ */

:root,
[data-layout="horizontal"]{
  --od-green: #0AB39C;
  --od-green-soft: #E6F8F4;
  --od-green-700: #089682;
  --od-ink: #0F1B2D;
  --od-ink-soft: #475467;
  --od-line: #EAECF0;
  --od-bg: #F4F6FA;
  --od-warning: #F79009;
  --od-danger: #F04438;
  --od-info: #3E93F2;
  --od-purple: #7F56D9;
  --od-gold: #FFB020;
  --od-shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --od-shadow-md: 0 4px 16px rgba(16,24,40,.06);
  --od-shadow-lg: 0 12px 32px rgba(16,24,40,.10);
  --od-shadow-glow: 0 8px 32px rgba(10,179,156,.25);
  --od-r-md: 10px;
  --od-r-lg: 14px;
  --od-r-xl: 20px;

  /* Velzon değişkenlerini de override et */
  --vz-success: #0AB39C;
  --vz-success-rgb: 10, 179, 156;
  --vz-primary: #0AB39C;
  --vz-primary-rgb: 10, 179, 156;
  --vz-link-color: var(--od-green);
  --vz-link-hover-color: var(--od-green-700);
  --vz-body-bg: var(--od-bg);
  --vz-card-border-color: var(--od-line);
  --vz-border-color: var(--od-line);
}

html, body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: var(--od-bg);
  color: var(--od-ink);
}

body{
  background:
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(10,179,156,.06), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 30%, rgba(127,86,217,.04), transparent 60%),
    radial-gradient(ellipse 500px 300px at 80% 100%, rgba(247,144,9,.04), transparent 60%),
    var(--od-bg) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{ letter-spacing: -.3px; }
.fw-semibold{ font-weight: 600 !important; }

/* ===== LIVE TICKER ===== */
.otd-ticker{
  background: var(--od-ink);
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  border-bottom: 1px solid #1a2a47;
}
.otd-ticker-inner{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 8px 0;
  animation: otd-tickerSlide 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.otd-ticker:hover .otd-ticker-inner{ animation-play-state: paused; }
.otd-ticker-item{ display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.otd-ticker-item .otd-live-dot{
  width: 6px; height: 6px; background: #0AB39C; border-radius: 50%;
  animation: otd-livePulse 1.5s infinite;
}
.otd-ticker-item .up{ color: #5DDBC0; font-weight: 700; }
.otd-ticker-item .down{ color: #FF8A8A; font-weight: 700; }
.otd-ticker-item .tag{
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}
@keyframes otd-tickerSlide{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@keyframes otd-livePulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(10,179,156,.7) }
  50%{ box-shadow: 0 0 0 6px rgba(10,179,156,0) }
}

/* ===== TOPBAR (Velzon override) ===== */
#page-topbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--od-line) !important;
  box-shadow: none !important;
}
#page-topbar .navbar-brand-box img{ transition: transform .3s ease; }
#page-topbar .navbar-brand-box:hover img{ transform: rotate(-6deg) scale(1.04); }

/* Topbar action buttons */
#page-topbar .header-item .btn-topbar{
  width: 40px; height: 40px;
  border-radius: 11px !important;
  background: rgba(247,248,250,.8);
  border: 1px solid var(--od-line);
  color: var(--od-ink-soft);
  transition: .2s;
}
#page-topbar .header-item .btn-topbar:hover{
  background: #fff;
  border-color: var(--od-green-soft);
  color: var(--od-ink);
  transform: translateY(-2px);
  box-shadow: var(--od-shadow-md);
}
#page-topbar .topbar-badge{
  border: 2px solid #fff;
  font-weight: 700 !important;
  font-size: 10px !important;
}
#page-topbar .topbar-badge.bg-danger{
  animation: otd-livePulse 2s infinite;
}

/* User dropdown chip */
#page-topbar .topbar-user .btn{
  background: rgba(247,248,250,.8) !important;
  border: 1px solid var(--od-line) !important;
  border-radius: 999px !important;
  padding: 5px 14px 5px 5px !important;
  transition: .2s;
}
#page-topbar .topbar-user .btn:hover{
  background: #fff !important;
  border-color: var(--od-green-soft) !important;
  box-shadow: var(--od-shadow-md);
}
#page-topbar .header-profile-user{
  width: 32px !important; height: 32px !important;
  border: 2px solid var(--od-gold);
}
#page-topbar .user-name-text{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--od-ink) !important;
}
#page-topbar .user-name-sub-text{
  font-size: 11px !important;
  color: var(--od-ink-soft) !important;
}

/* Representative card in topbar */
#page-topbar .header-item .rounded-4.shadow-lg{
  background: linear-gradient(135deg, #F7F8FA 0%, #fff 100%) !important;
  border: 1px solid var(--od-line);
  box-shadow: var(--od-shadow-sm) !important;
  border-radius: var(--od-r-md) !important;
  padding: 8px 14px !important;
}
#page-topbar .header-item .rounded-4.shadow-lg p{
  font-size: 12px !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}
#page-topbar .header-item .rounded-4.shadow-lg p strong{
  color: var(--od-ink-soft);
  font-weight: 500;
}
#page-topbar .header-item .rounded-4.shadow-lg p span{
  color: var(--od-green);
  font-weight: 700;
}

/* Notification dropdown */
#page-topbar .dropdown-menu{
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-r-lg) !important;
  box-shadow: var(--od-shadow-lg) !important;
  padding: 6px !important;
}
#page-topbar .dropdown-menu .dropdown-item{
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--od-ink-soft);
  padding: 9px 12px !important;
  transition: .15s;
}
#page-topbar .dropdown-menu .dropdown-item:hover{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
}
#page-topbar .dropdown-menu .dropdown-item i{
  font-size: 16px !important;
  color: #98A2B3 !important;
}
#page-topbar .dropdown-menu .dropdown-item:hover i{ color: var(--od-green) !important; }
#page-topbar .dropdown-menu .dropdown-header{
  font-size: 11px !important;
  font-weight: 600;
  color: #98A2B3;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 10px 12px 4px !important;
}
#page-topbar .dropdown-menu .dropdown-divider{
  margin: 6px 4px !important;
  border-color: var(--od-line);
}
#page-topbar .dropdown-head{
  border-radius: var(--od-r-lg) var(--od-r-lg) 0 0 !important;
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%) !important;
}

/* ===== SIDEBAR / HORIZONTAL MENU ===== */
[data-layout="horizontal"] .app-menu{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--od-line) !important;
  box-shadow: none !important;
}
[data-layout="horizontal"] #navbar-nav .nav-item .nav-link{
  color: var(--od-ink-soft) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid transparent;
  transition: .2s;
  border-radius: 0 !important;
}
[data-layout="horizontal"] #navbar-nav .nav-item .nav-link:hover,
[data-layout="horizontal"] #navbar-nav .nav-item .nav-link.active{
  color: var(--od-green) !important;
  background: transparent !important;
  border-bottom-color: var(--od-green);
}
[data-layout="horizontal"] #navbar-nav .nav-item .nav-link i{
  font-size: 18px !important;
  margin-right: 6px;
}
[data-layout="horizontal"] #navbar-nav .menu-dropdown{
  background: #fff !important;
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-r-lg) !important;
  box-shadow: var(--od-shadow-lg) !important;
  padding: 6px !important;
}
[data-layout="horizontal"] #navbar-nav .nav-sm .nav-link{
  padding: 9px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border-bottom: none;
}
[data-layout="horizontal"] #navbar-nav .nav-sm .nav-link:hover{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
  border-bottom: none;
}
[data-layout="horizontal"] #navbar-nav .nav-sm .nav-link.active{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
}
[data-layout="horizontal"] #navbar-nav .badge{
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}

/* Dark sidebar overrides (in case sidebar is vertical on smaller screens) */
[data-sidebar="dark"] .navbar-nav .nav-item .nav-link{
  color: rgba(255,255,255,.78) !important;
  border-radius: 8px !important;
  margin: 1px 8px;
  padding: 10px 12px !important;
}
[data-sidebar="dark"] .navbar-nav .nav-item .nav-link:hover,
[data-sidebar="dark"] .navbar-nav .nav-item .nav-link.active{
  background: rgba(10,179,156,.18) !important;
  color: #fff !important;
}
[data-sidebar="dark"] .navbar-nav .nav-item .nav-link.active{
  box-shadow: inset 3px 0 0 var(--od-green);
}

/* ===== PAGE CONTENT ===== */
.main-content .page-content{
  padding-top: 24px !important;
  padding-bottom: 60px !important;
}
.page-title-box{
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px dashed var(--od-line);
}
.page-title-box h4{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px;
}
.page-title-box .breadcrumb{
  font-size: 12px;
}
.page-title-box .breadcrumb-item.active{
  color: var(--od-green);
  font-weight: 600;
}

/* ===== CARDS ===== */
.card{
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-r-lg) !important;
  box-shadow: var(--od-shadow-sm) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover{ box-shadow: var(--od-shadow-md) !important; }
.card-animate:hover{ transform: translateY(-3px); }
.card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--od-line) !important;
  padding: 16px 20px !important;
}
.card-header .card-title{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px;
}
.card-body{ padding: 20px !important; }

/* ===== BUTTONS ===== */
.btn{
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: .2s !important;
  letter-spacing: -.1px;
}
.btn-success, .btn-primary{
  background: var(--od-green) !important;
  border-color: var(--od-green) !important;
  box-shadow: 0 1px 2px rgba(10,179,156,.2);
}
.btn-success:hover, .btn-primary:hover{
  background: var(--od-green-700) !important;
  border-color: var(--od-green-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--od-shadow-md);
}
.btn-soft-success{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
}
.btn-soft-success:hover{
  background: var(--od-green) !important;
  color: #fff !important;
}
.btn-info{
  background: var(--od-info) !important;
  border-color: var(--od-info) !important;
}
.btn-soft-info{
  background: #EAF4FE !important;
  color: var(--od-info) !important;
}
.btn-soft-info:hover{ background: var(--od-info) !important; color: #fff !important; }
.btn-warning{ background: var(--od-warning) !important; border-color: var(--od-warning) !important; color: #fff !important; }
.btn-danger{ background: var(--od-danger) !important; border-color: var(--od-danger) !important; }
.btn-outline-info{
  border-color: var(--od-info) !important;
  color: var(--od-info) !important;
}
.btn-outline-info:hover{ background: var(--od-info) !important; color: #fff !important; }
.btn-light{
  background: #F7F8FA !important;
  border-color: var(--od-line) !important;
  color: var(--od-ink) !important;
}
.btn-light:hover{ background: #fff !important; border-color: var(--od-green-soft) !important; }

/* ===== BADGES ===== */
.badge{
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  letter-spacing: .1px;
}
.badge.bg-success-subtle, .bg-success-subtle{ background: #ECFDF3 !important; color: #067647 !important; }
.badge.bg-warning-subtle, .bg-warning-subtle{ background: #FEF4E6 !important; color: var(--od-warning) !important; }
.badge.bg-info-subtle, .bg-info-subtle{ background: #EAF4FE !important; color: var(--od-info) !important; }
.badge.bg-danger-subtle, .bg-danger-subtle{ background: #FEF3F2 !important; color: var(--od-danger) !important; }
.badge.bg-primary-subtle, .bg-primary-subtle{ background: var(--od-green-soft) !important; color: var(--od-green) !important; }

/* ===== TABLES ===== */
.table{
  border-color: var(--od-line) !important;
  margin-bottom: 0 !important;
}
.table thead.table-light th,
.table thead th{
  background: #FAFBFC !important;
  border-color: var(--od-line) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--od-ink-soft) !important;
  padding: 14px 16px !important;
}
.table tbody td{
  padding: 14px 16px !important;
  font-size: 13px !important;
  border-color: #F2F4F7 !important;
  vertical-align: middle;
}
.table tbody tr{ transition: background .15s ease; }
.table.table-hover tbody tr:hover{
  background: #FAFBFC !important;
}
.table .avatar-sm{
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
}

/* Alt-style table inside .table-card panels */
.table-card .table tbody tr td:first-child{ padding-left: 20px !important; }
.table-card .table tbody tr td:last-child{ padding-right: 20px !important; }

/* ===== FORMS ===== */
.form-control, .form-select{
  border: 1px solid var(--od-line) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  background-color: #fff;
  transition: .15s;
}
.form-control:focus, .form-select:focus{
  border-color: var(--od-green) !important;
  box-shadow: 0 0 0 4px var(--od-green-soft) !important;
}
.search-box .form-control{
  background: #FAFBFC !important;
  padding-left: 38px !important;
}
.search-box .search-icon{
  color: #98A2B3 !important;
  top: 50%; transform: translateY(-50%);
  left: 12px !important;
}
.input-group .btn{
  border-radius: 10px !important;
}

/* ===== NAV TABS ===== */
.nav-tabs-custom .nav-link{
  border: none !important;
  color: var(--od-ink-soft) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.nav-tabs-custom .nav-link.active{
  color: var(--od-green) !important;
  border-bottom-color: var(--od-green) !important;
  background: transparent !important;
}

/* ===== ALERTS ===== */
.alert{
  border: 1px solid transparent !important;
  border-radius: var(--od-r-md) !important;
  padding: 12px 16px !important;
  font-size: 13px;
  font-weight: 500;
}
.alert-warning{ background: #FEF4E6 !important; color: #B54708 !important; border-color: #FEDF89 !important; }
.alert-danger{ background: #FEF3F2 !important; color: #B42318 !important; border-color: #FECDCA !important; }
.alert-success{ background: #ECFDF3 !important; color: #067647 !important; border-color: #ABEFC6 !important; }
.alert-info{ background: #EAF4FE !important; color: #175CD3 !important; border-color: #B2DDFF !important; }

/* ===== DROPDOWN ===== */
.dropdown-menu{
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-r-lg) !important;
  box-shadow: var(--od-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-item{
  border-radius: 8px !important;
  font-size: 13px;
  padding: 8px 12px !important;
  transition: .15s;
}
.dropdown-item:hover{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
}

/* ===== AVATARS ===== */
.avatar-sm{
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
}
.avatar-title{
  border-radius: 10px !important;
}

/* ===== FOOTER ===== */
.footer{
  background: transparent !important;
  border-top: 1px dashed var(--od-line);
  font-size: 12px;
  color: var(--od-ink-soft);
}

/* ===== MODALS ===== */
.modal-content{
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-r-lg) !important;
  box-shadow: var(--od-shadow-lg) !important;
}
.modal-header{
  border-bottom: 1px solid var(--od-line) !important;
  padding: 16px 20px !important;
}
.modal-footer{
  border-top: 1px solid var(--od-line) !important;
  padding: 14px 20px !important;
}

/* ===== BACK TO TOP ===== */
#back-to-top{
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: var(--od-shadow-glow) !important;
  width: 44px !important; height: 44px !important;
}

/* ============================================================
   YENİ OTODEVİ KOMPONENTLERİ (otd- prefix)
   ============================================================ */

/* Hero greeting */
.otd-hero{
  background: linear-gradient(135deg, #0F1B2D 0%, #1A2A47 50%, #0F3A40 100%);
  color: #fff;
  border-radius: var(--od-r-xl);
  padding: 28px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.otd-hero:before{
  content: ""; position: absolute; right: -40px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(10,179,156,.4) 0%, transparent 60%);
  filter: blur(20px);
}
.otd-hero:after{
  content: ""; position: absolute; left: 30%; bottom: -150px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(127,86,217,.3) 0%, transparent 60%);
  filter: blur(20px);
}
.otd-hero-grid{
  display: grid;
  grid-template-columns: 1.2fr auto auto;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.otd-hero h1{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 0 0 8px;
  color: #fff;
}
.otd-hero .otd-eyebrow{
  font-size: 12px;
  font-weight: 600;
  color: var(--od-green);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.otd-hero p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  max-width: 520px;
}
.otd-hero p b{ color: #fff; }
.otd-wave{
  display: inline-block;
  animation: otd-wave 2s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes otd-wave{
  0%,60%,100%{ transform: rotate(0) }
  10%{ transform: rotate(14deg) }
  20%{ transform: rotate(-8deg) }
  30%{ transform: rotate(14deg) }
  40%{ transform: rotate(-4deg) }
  50%{ transform: rotate(10deg) }
}

/* Streak chip */
.otd-streak{
  position: absolute; top: 20px; right: 24px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: rgba(247,144,9,.15);
  border: 1px solid rgba(247,144,9,.3);
  padding: 6px 12px;
  border-radius: 999px;
}
.otd-streak .otd-fire{ font-size: 18px; animation: otd-flicker 1.4s ease-in-out infinite; }
.otd-streak b{ font-size: 14px; font-weight: 700; color: #FFD89A; line-height: 1; display: block; }
.otd-streak small{ font-size: 11px; color: rgba(255,255,255,.6); display: block; line-height: 1.4; }
@keyframes otd-flicker{
  0%,100%{ transform: scale(1) rotate(-3deg); filter: hue-rotate(0) }
  50%{ transform: scale(1.15) rotate(3deg); filter: hue-rotate(8deg) }
}

/* Daily goal ring */
.otd-goal-ring{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.otd-goal-ring svg{ transform: rotate(-90deg); }
.otd-goal-ring .ring-bg{ fill: none; stroke: rgba(255,255,255,.1); stroke-width: 8; }
.otd-goal-ring .ring-fg{
  fill: none; stroke: url(#otdRingGrad); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 101.79;
  animation: otd-ringFill 1.6s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(10,179,156,.6));
}
@keyframes otd-ringFill{ from{ stroke-dashoffset: 339.292 } }
.otd-goal-ring .ring-text{
  position: relative; margin-top: -78px; text-align: center; width: 120px;
}
.otd-goal-ring .ring-text b{ display: block; font-size: 24px; font-weight: 800; line-height: 1; color: #fff; }
.otd-goal-ring .ring-text small{
  font-size: 11px; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .4px;
}
.otd-goal-ring .otd-label{
  font-size: 12px; color: rgba(255,255,255,.7);
  font-weight: 500; margin-top: 8px;
}

/* Level card */
.otd-level-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--od-r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  backdrop-filter: blur(10px);
}
.otd-level-card .top{ display: flex; align-items: center; gap: 10px; }
.otd-level-card .badge-icon{
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700 0%, #FFB020 100%);
  color: #0F1B2D;
  display: grid; place-items: center;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(255,176,32,.4);
  animation: otd-floaty 3s ease-in-out infinite;
}
@keyframes otd-floaty{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
.otd-level-card .lv-name{
  font-size: 11px; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.otd-level-card .lv-title{ font-size: 14px; font-weight: 700; color: #fff; }
.otd-level-card .lv-bar{
  height: 6px; background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden; position: relative;
}
.otd-level-card .lv-fill{
  height: 100%; background: linear-gradient(90deg, #FFB020, #FFD700);
  border-radius: 3px; position: relative;
  animation: otd-lvFill 1.4s ease-out forwards;
}
.otd-level-card .lv-fill:after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: otd-shimmer 2.4s linear infinite;
}
@keyframes otd-lvFill{ from{ width: 0 !important } }
@keyframes otd-shimmer{ from{ transform: translateX(-100%) } to{ transform: translateX(100%) } }
.otd-level-card .lv-meta{
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,.6);
}
.otd-level-card .lv-meta b{ color: var(--od-green); font-weight: 700; }

/* Stat card (otd version, additionally to .card .card-animate) */
.otd-stat{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: var(--od-r-lg);
  padding: 20px;
  transition: .3s;
  position: relative;
  overflow: hidden;
}
.otd-stat:before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--otd-accent, var(--od-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.otd-stat:hover:before{ transform: scaleX(1); }
.otd-stat:hover{
  box-shadow: var(--od-shadow-lg);
  transform: translateY(-4px);
}
.otd-stat[data-accent="green"]{ --otd-accent: var(--od-green); }
.otd-stat[data-accent="blue"]{ --otd-accent: var(--od-info); }
.otd-stat[data-accent="orange"]{ --otd-accent: var(--od-warning); }
.otd-stat[data-accent="purple"]{ --otd-accent: var(--od-purple); }
.otd-stat .otd-stat-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.otd-stat .otd-stat-head .otd-label{
  font-size: 12px; font-weight: 600;
  color: var(--od-ink-soft);
  text-transform: uppercase; letter-spacing: .4px;
}
.otd-stat .otd-stat-icon{
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 18px;
  transition: .3s;
}
.otd-stat:hover .otd-stat-icon{ transform: rotate(-8deg) scale(1.08); }
.otd-stat-icon.green{ background: var(--od-green-soft); color: var(--od-green); }
.otd-stat-icon.blue{ background: #EAF4FE; color: var(--od-info); }
.otd-stat-icon.orange{ background: #FEF4E6; color: var(--od-warning); }
.otd-stat-icon.purple{ background: #F4F0FF; color: var(--od-purple); }
.otd-stat .otd-value{
  font-size: 28px; font-weight: 800;
  letter-spacing: -.6px; line-height: 1;
  color: var(--od-ink);
}
.otd-stat .otd-delta{
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.otd-stat .otd-delta.up{ background: #ECFDF3; color: #067647; }
.otd-stat .otd-delta.down{ background: #FEF3F2; color: var(--od-danger); }
.otd-stat .otd-spark{ height: 36px; margin-top: 10px; width: 100%; }
.otd-stat .otd-spark path{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: otd-drawLine 1.6s ease-out forwards;
}
@keyframes otd-drawLine{ to{ stroke-dashoffset: 0 } }

/* Deals strip */
.otd-deals-strip{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: var(--od-r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.otd-deals-strip:before{
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--od-warning), var(--od-danger));
}
.otd-deals-strip .head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.otd-deals-strip .head .icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FEF4E6 0%, #FFE4C4 100%);
  display: grid; place-items: center;
  color: var(--od-warning);
  font-size: 18px;
  animation: otd-flicker 2s ease-in-out infinite;
}
.otd-deals-strip .head h3{ margin: 0; font-size: 15px; font-weight: 700; color: var(--od-ink); }
.otd-deals-strip .head .sub{ margin: 2px 0 0; font-size: 12px; color: var(--od-ink-soft); }
.otd-countdown{ margin-left: auto; display: flex; gap: 6px; }
.otd-cd-box{
  background: var(--od-ink); color: #fff;
  border-radius: 8px; padding: 6px 10px;
  text-align: center; min-width: 48px;
}
.otd-cd-box b{ display: block; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.otd-cd-box small{ font-size: 9px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .4px; }

/* Activity feed */
.otd-activity{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: var(--od-r-lg);
  overflow: hidden;
}
.otd-activity .head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--od-line);
  display: flex; align-items: center; gap: 10px;
}
.otd-activity .head .live{
  width: 8px; height: 8px;
  background: var(--od-green); border-radius: 50%;
  animation: otd-livePulse 1.5s infinite;
}
.otd-activity .head h3{ margin: 0; font-size: 14px; font-weight: 700; flex: 1; color: var(--od-ink); }
.otd-activity .head small{ font-size: 11px; color: var(--od-ink-soft); }
.otd-activity .body{ padding: 0; max-height: 460px; overflow-y: auto; }
.otd-act-item{
  display: flex; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #F2F4F7;
  animation: otd-slideIn .5s ease;
}
.otd-act-item:last-child{ border-bottom: none; }
@keyframes otd-slideIn{
  from{ opacity: 0; transform: translateX(20px) }
  to{ opacity: 1; transform: translateX(0) }
}
.otd-act-item .av{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.otd-act-item .av.green{ background: linear-gradient(135deg, #0AB39C, #13D9BD); }
.otd-act-item .av.blue{ background: linear-gradient(135deg, #3E93F2, #7BB7F5); }
.otd-act-item .av.orange{ background: linear-gradient(135deg, #F79009, #FFB85C); }
.otd-act-item .av.purple{ background: linear-gradient(135deg, #7F56D9, #A685E2); }
.otd-act-item .body-x{ flex: 1; min-width: 0; }
.otd-act-item .body-x p{ margin: 0; font-size: 13px; line-height: 1.4; color: var(--od-ink); }
.otd-act-item .body-x p .price{ color: var(--od-green); font-weight: 700; }
.otd-act-item .body-x small{ color: var(--od-ink-soft); font-size: 11px; }
.otd-act-item.is-new{
  animation: otd-flashIn .8s ease, otd-slideIn .5s ease;
}
@keyframes otd-flashIn{
  0%{ background-color: rgba(10,179,156,.18) }
  100%{ background-color: transparent }
}

/* List row pattern (panel + list rows) */
.otd-list-row{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid #F2F4F7;
  transition: .15s;
}
.otd-list-row:last-child{ border-bottom: none; }
.otd-list-row:hover{ background: #FAFBFC; }
.otd-list-row .thumb{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--od-bg);
  display: grid; place-items: center;
  color: var(--od-ink-soft); font-size: 18px;
  flex-shrink: 0;
}
.otd-list-row .body-x{ flex: 1; min-width: 0; }
.otd-list-row .body-x b{
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--od-ink);
}
.otd-list-row .body-x small{ color: var(--od-ink-soft); font-size: 12px; }
.otd-list-row .right{ text-align: right; flex-shrink: 0; }
.otd-list-row .right b{ font-size: 13px; font-weight: 700; color: var(--od-ink); }

/* FAB */
.otd-fab{
  position: fixed; bottom: 28px; right: 28px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  color: #fff;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--od-shadow-glow);
  z-index: 40;
  transition: .3s;
}
.otd-fab:hover{ transform: scale(1.08) rotate(8deg); }
.otd-fab i{ font-size: 22px; }
.otd-fab:after{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--od-green);
  animation: otd-fabRing 2s ease-out infinite;
}
@keyframes otd-fabRing{
  0%{ transform: scale(1); opacity: .6 }
  100%{ transform: scale(1.5); opacity: 0 }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
  .otd-hero-grid{ grid-template-columns: 1fr; }
  .otd-streak{ position: static; align-self: flex-start; margin-bottom: 14px; }
  .otd-level-card{ min-width: auto; }
}
@media (max-width: 768px){
  .otd-hero{ padding: 20px; }
  .otd-hero h1{ font-size: 22px; }
  #page-topbar .header-item .rounded-4.shadow-lg{ display: none !important; }
}

/* ============================================================
   AUTH PAGES — Login / Register / ForgotPassword modernizasyon
   ============================================================ */
.otd-auth-body{
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 800px 500px at 20% 0%, rgba(10,179,156,.10), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 30%, rgba(127,86,217,.06), transparent 60%),
    radial-gradient(ellipse 500px 400px at 80% 100%, rgba(247,144,9,.06), transparent 60%),
    #F4F6FA;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--od-ink);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.otd-auth-wrapper{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.otd-auth-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(16,24,40,.10), 0 8px 24px rgba(16,24,40,.06);
  border: 1px solid var(--od-line);
  min-height: 600px;
}

/* Sol marka paneli */
.otd-auth-brand{
  position: relative;
  background: linear-gradient(135deg, #0F1B2D 0%, #1A2A47 50%, #0F3A40 100%);
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.otd-auth-brand:before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(247,144,9,.25), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(10,179,156,.22), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.otd-auth-particles-bg{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.otd-auth-particles-bg span{
  position: absolute;
  display: block;
  width: 4px; height: 4px;
  background: rgba(255,255,255,.4);
  border-radius: 50%;
  bottom: -10px;
  filter: blur(.5px);
  animation: otd-particle-float linear infinite;
}
.otd-auth-particles-bg span:nth-child(1){ left: 10%; width: 5px; height: 5px; animation-duration: 18s; background: rgba(247,144,9,.5) }
.otd-auth-particles-bg span:nth-child(2){ left: 25%; width: 3px; height: 3px; animation-duration: 24s; animation-delay: 3s; background: rgba(10,179,156,.5) }
.otd-auth-particles-bg span:nth-child(3){ left: 40%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 6s; background: rgba(127,86,217,.4) }
.otd-auth-particles-bg span:nth-child(4){ left: 60%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 1s; background: rgba(247,144,9,.4) }
.otd-auth-particles-bg span:nth-child(5){ left: 75%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 5s; background: rgba(255,255,255,.3) }
.otd-auth-particles-bg span:nth-child(6){ left: 90%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 8s; background: rgba(10,179,156,.4) }
.otd-auth-particles-bg span:nth-child(7){ left: 50%; width: 3px; height: 3px; animation-duration: 26s; animation-delay: 2s; background: rgba(255,255,255,.2) }
.otd-auth-particles-bg span:nth-child(8){ left: 18%; width: 5px; height: 5px; animation-duration: 19s; animation-delay: 7s; background: rgba(127,86,217,.3) }

.otd-auth-brand-content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
.otd-auth-logo{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: auto;
}
.otd-auth-logo .otd-auth-logo-img{
  height: 110px; width: auto; max-width: 420px;
  object-fit: contain;
  background: transparent;
  filter: brightness(0) invert(1) drop-shadow(0 10px 28px rgba(0,0,0,.4));
}
@media (max-width: 991px){
  .otd-auth-logo .otd-auth-logo-img{ height: 80px; max-width: 320px; }
}
.otd-auth-logo .logo-mark{
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F79009 0%, #FFB020 50%, #FFD56B 100%);
  display: grid; place-items: center;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  box-shadow:
    0 10px 32px rgba(247,144,9,.45),
    inset 0 -4px 10px rgba(0,0,0,.2),
    inset 0 3px 8px rgba(255,255,255,.4);
}
.otd-auth-logo .logo-name{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.1;
}
.otd-auth-logo .logo-tag{
  font-size: 11px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  margin-top: 2px;
}
.otd-auth-headline{
  margin: auto 0 32px;
}
.otd-auth-headline h2{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.otd-auth-headline h2 .accent{
  background: linear-gradient(135deg, #FFB020 0%, #F79009 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.otd-auth-headline p{
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin: 0;
  line-height: 1.55;
}

.otd-auth-stats{
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
}
.otd-auth-stats > div{
  flex: 1;
  border-right: 1px solid rgba(255,255,255,.1);
  padding: 0 14px;
}
.otd-auth-stats > div:first-child{ padding-left: 0; }
.otd-auth-stats > div:last-child{ padding-right: 0; border-right: 0; }
.otd-auth-stats b{
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.otd-auth-stats span{
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-top: 2px;
}

/* Sağ form paneli */
.otd-auth-form{
  padding: 44px 44px 32px;
  display: flex;
  flex-direction: column;
}
.otd-auth-header h1{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 6px;
  color: var(--od-ink);
}
.otd-auth-header p{
  font-size: 13px;
  color: var(--od-ink-soft);
  margin: 0 0 20px;
}

.otd-auth-form .alert{
  margin-bottom: 16px !important;
  font-size: 13px !important;
}

.otd-field{
  margin-bottom: 14px;
}
.otd-field-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.otd-field label,
.otd-field-head label{
  font-size: 12px;
  font-weight: 600;
  color: var(--od-ink);
  margin: 0 0 6px;
  display: block;
  letter-spacing: -.1px;
}
.otd-field-head label{ margin-bottom: 0; }
.otd-field-head a{
  font-size: 12px;
  color: var(--od-green);
  font-weight: 600;
  text-decoration: none;
}
.otd-field-head a:hover{ text-decoration: underline; }

.otd-input{
  position: relative;
  display: flex;
  align-items: center;
  background: #FAFBFC;
  border: 1px solid var(--od-line);
  border-radius: 11px;
  transition: .15s;
}
.otd-input:focus-within{
  background: #fff;
  border-color: var(--od-green);
  box-shadow: 0 0 0 4px var(--od-green-soft);
}
.otd-input > i{
  font-size: 18px;
  color: #98A2B3;
  margin-left: 14px;
  flex-shrink: 0;
}
.otd-input input,
.otd-input select{
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--od-ink);
  outline: none;
  width: 100%;
}
.otd-input input::placeholder{ color: #98A2B3; }
.otd-input .otd-toggle-pw{
  background: none;
  border: none;
  color: #98A2B3;
  padding: 0 14px;
  cursor: pointer;
  font-size: 18px;
  display: grid; place-items: center;
}
.otd-input .otd-toggle-pw:hover{ color: var(--od-ink); }

.otd-checkbox{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--od-ink-soft);
  cursor: pointer;
  user-select: none;
}
.otd-checkbox input{
  width: 16px; height: 16px;
  accent-color: var(--od-green);
  cursor: pointer;
}

.otd-auth-submit{
  width: 100%;
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  color: #fff;
  border: none;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  box-shadow: 0 4px 12px rgba(10,179,156,.25);
}
.otd-auth-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,179,156,.35);
}
.otd-auth-submit i{ font-size: 18px; transition: transform .2s; }
.otd-auth-submit:hover i{ transform: translateX(3px); }

.otd-auth-divider{
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px;
  color: #98A2B3;
  font-size: 12px;
}
.otd-auth-divider:before,
.otd-auth-divider:after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--od-line);
}

.otd-auth-footer-text{
  text-align: center;
  font-size: 13px;
  color: var(--od-ink-soft);
  margin: 0 0 18px;
}
.otd-auth-footer-text a{
  color: var(--od-green);
  font-weight: 700;
  text-decoration: none;
}
.otd-auth-footer-text a:hover{ text-decoration: underline; }

.otd-auth-langs{
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--od-line);
}
.otd-auth-langs .lang-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--od-line);
  border-radius: 999px;
  background: #FAFBFC;
  font-size: 11px;
  color: var(--od-ink-soft);
  font-weight: 600;
  text-decoration: none;
  transition: .15s;
}
.otd-auth-langs .lang-chip:hover{
  background: #fff;
  border-color: var(--od-green-soft);
  color: var(--od-green);
}
.otd-auth-langs .lang-chip .fi{
  width: 16px; height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

.otd-auth-page-footer{
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--od-ink-soft);
}
.otd-auth-page-footer i.text-danger{ color: var(--od-danger) !important; }

/* Help illustration (forgot password) */
.otd-auth-form .help-illu{
  text-align: center;
  margin: 8px 0 16px;
}
.otd-auth-form .help-illu lord-icon{ width: 80px; height: 80px; }
.otd-auth-form .help-tip{
  background: var(--od-green-soft);
  color: var(--od-green-700);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 900px){
  .otd-auth-card{ grid-template-columns: 1fr; }
  .otd-auth-brand{ padding: 28px; min-height: 240px; }
  .otd-auth-headline h2{ font-size: 22px; }
  .otd-auth-form{ padding: 28px; }
}
@media (max-width: 480px){
  .otd-auth-body{ padding: 12px; }
  .otd-auth-stats{ flex-wrap: wrap; }
  .otd-auth-stats > div{ flex: 1 1 33%; padding: 8px 6px; border-right: 0; }
  .otd-auth-langs .lang-chip{ font-size: 10px; padding: 4px 8px; }
}

/* ============================================================
   MOBILE APP SHELL — _Layout.Mobile.cshtml için native uygulama hissi
   body.otd-mobile-shell aktif olduğunda devreye girer
   ============================================================ */
body.otd-mobile-shell{
  background: var(--od-bg) !important;
  margin: 0;
  /* Tarayıcı bottom bar / iOS Safari için safe area */
  --otd-mob-top: 56px;
  --otd-mob-bot: calc(64px + env(safe-area-inset-bottom, 0));
  padding-top: var(--otd-mob-top);
  padding-bottom: var(--otd-mob-bot);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.otd-mobile-shell #layout-wrapper > .app-menu,
body.otd-mobile-shell .vertical-overlay,
body.otd-mobile-shell #layout-wrapper > footer,
body.otd-mobile-shell .navbar-brand-box.horizontal-logo,
body.otd-mobile-shell #topnav-hamburger-icon,
body.otd-mobile-shell #page-topbar{
  display: none !important;
}
body.otd-mobile-shell .main-content{
  margin-left: 0 !important;
  padding: 0 !important;
}
body.otd-mobile-shell .page-content{
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0)) !important;
  min-height: calc(100vh - var(--otd-mob-top) - var(--otd-mob-bot));
}

/* Sayfa içindeki büyük desktop padding'leri sıfırla */
body.otd-mobile-shell .container-fluid{ padding-left: 0 !important; padding-right: 0 !important; }
body.otd-mobile-shell .row{ --bs-gutter-x: .6rem; }

/* ===== Mobile Topbar ===== */
.otd-mob-topbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--od-line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  padding-top: env(safe-area-inset-top, 0);
}
.otd-mob-topbar .otd-mob-brand{
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.otd-mob-topbar .otd-mob-brand .logo-mark{
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #F79009 0%, #FFB020 50%, #FFD56B 100%);
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
  box-shadow: 0 6px 16px rgba(247,144,9,.4);
}
.otd-mob-topbar .otd-mob-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--od-ink);
  letter-spacing: -.2px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otd-mob-topbar .otd-mob-tactions{
  display: flex; gap: 6px;
  margin-left: auto;
}
.otd-mob-topbar .otd-mob-tbtn{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--od-bg);
  border: 1px solid var(--od-line);
  display: grid; place-items: center;
  color: var(--od-ink-soft);
  position: relative;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.otd-mob-topbar .otd-mob-tbtn:active{ transform: scale(.92); background: #fff; }
.otd-mob-topbar .otd-mob-tbtn i{ font-size: 19px; }
.otd-mob-topbar .otd-mob-tbtn .otd-dot{
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--od-danger);
  border-radius: 50%;
  border: 2px solid #fff;
  animation: otd-livePulse 2s infinite;
}
.otd-mob-topbar .otd-mob-tbtn .otd-count{
  position: absolute; top: -3px; right: -3px;
  background: var(--od-green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  border: 2px solid #fff;
  min-width: 16px;
  line-height: 1.2;
  text-align: center;
}

/* ===== Profesyonel Mobil Sepet Butonu (topbar) ===== */
.otd-mob-cart{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--od-bg);
  border: 1px solid var(--od-line);
  color: var(--od-ink-soft);
  text-decoration: none;
  position: relative;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -.2px;
  line-height: 1;
  white-space: nowrap;
}
.otd-mob-cart:active{ transform: scale(.94); }
.otd-mob-cart i{
  font-size: 18px;
  transition: transform .25s cubic-bezier(.18,.89,.32,1.28);
}
.otd-mob-cart .cart-num{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--od-green-700);
  max-width: 0;
  overflow: hidden;
  transition: max-width .3s ease, margin-left .3s ease;
  display: inline-block;
}
.otd-mob-cart .cart-num-wrap{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.otd-mob-cart.has-items{
  background: var(--od-green-soft);
  border-color: rgba(10,179,156,.35);
  color: var(--od-green-700);
  box-shadow: 0 4px 12px rgba(10,179,156,.18);
  padding: 0 12px 0 10px;
}
.otd-mob-cart.has-items i{
  color: var(--od-green);
}
.otd-mob-cart.has-items .cart-num{
  max-width: 80px;
  margin-left: 4px;
}
.otd-mob-cart.is-bumping i{
  animation: otd-cart-bump .55s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes otd-cart-bump{
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.25) rotate(-12deg); }
  60%  { transform: scale(.92) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ===== Mobile Bottom Navigation ===== */
.otd-mob-bottombar{
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--od-line);
  box-shadow: 0 -8px 24px rgba(16,24,40,.06);
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: center;
}
.otd-mob-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--od-ink-soft);
  text-decoration: none;
  position: relative;
  transition: color .15s ease;
  padding: 6px 4px;
}
.otd-mob-tab i{
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}
.otd-mob-tab:active i{ transform: scale(.88); }
.otd-mob-tab.active{ color: var(--od-green); }
.otd-mob-tab.active:before{
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--od-green);
  border-radius: 0 0 3px 3px;
}
.otd-mob-tab .otd-tab-badge{
  position: absolute;
  top: 4px; right: 18%;
  background: var(--od-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  border: 2px solid #fff;
  min-width: 14px;
  line-height: 1.2;
  text-align: center;
}

/* Center FAB tab — kaydet / hızlı ekle */
.otd-mob-fab-tab{
  position: relative;
  display: grid; place-items: center;
  height: 100%;
}
.otd-mob-fab-tab .fab-btn{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  color: #fff;
  border: 4px solid #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,179,156,.45);
  transition: transform .2s ease;
  margin-top: -22px;
  text-decoration: none;
}
.otd-mob-fab-tab .fab-btn:active{ transform: scale(.92); }
.otd-mob-fab-tab .fab-btn i{ font-size: 26px; }

/* ===== Mobile Drawer (Daha Fazla menüsü) ===== */
.otd-mob-drawer{
  position: fixed; inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
}
.otd-mob-drawer.is-open{ visibility: visible; pointer-events: auto; }
.otd-mob-drawer .otd-mob-drawer-back{
  position: absolute; inset: 0;
  background: rgba(15, 27, 45, .55);
  opacity: 0;
  transition: opacity .25s ease;
}
.otd-mob-drawer.is-open .otd-mob-drawer-back{ opacity: 1; }
.otd-mob-drawer .otd-mob-drawer-panel{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.18,.89,.32,1.28);
  padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 8px);
}
.otd-mob-drawer.is-open .otd-mob-drawer-panel{ transform: translateY(0); }
.otd-mob-drawer .otd-mob-drawer-handle{
  width: 40px; height: 4px;
  background: var(--od-line);
  border-radius: 4px;
  margin: 8px auto 14px;
}
.otd-mob-drawer .otd-mob-drawer-section{
  padding: 0 16px;
  margin-bottom: 8px;
}
.otd-mob-drawer .otd-mob-drawer-section-title{
  font-size: 11px;
  font-weight: 700;
  color: #98A2B3;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 12px 4px 6px;
}
.otd-mob-drawer .otd-mob-drawer-item{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: 11px;
  color: var(--od-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease;
}
.otd-mob-drawer .otd-mob-drawer-item:active{ background: var(--od-bg); }
.otd-mob-drawer .otd-mob-drawer-item i{
  font-size: 20px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--od-bg);
  color: var(--od-ink-soft);
}
.otd-mob-drawer .otd-mob-drawer-item.danger{ color: var(--od-danger); }
.otd-mob-drawer .otd-mob-drawer-item.danger i{ background: #FEF3F2; color: var(--od-danger); }
.otd-mob-drawer .otd-mob-drawer-item .otd-arrow{
  margin-left: auto;
  background: transparent !important;
  width: auto !important;
  color: #98A2B3 !important;
  font-size: 18px !important;
}

/* ===== Mobile content components ===== */

/* Greet bar — selamlama + ufak özet */
.otd-mob-greet{
  background: linear-gradient(135deg, #0F1B2D 0%, #1A2A47 50%, #0F3A40 100%);
  color: #fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.otd-mob-greet:before{
  content: "";
  position: absolute; right: -30px; top: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(247,144,9,.3), transparent 60%);
  filter: blur(20px);
}
.otd-mob-greet .greet-row{
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.otd-mob-greet .greet-av{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  display: grid; place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.otd-mob-greet .greet-text{
  flex: 1; min-width: 0;
}
.otd-mob-greet .greet-text small{
  font-size: 11px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}
.otd-mob-greet .greet-text b{
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otd-mob-greet .greet-streak{
  background: rgba(247,144,9,.18);
  border: 1px solid rgba(247,144,9,.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #FFD89A;
  white-space: nowrap;
  flex-shrink: 0;
}
.otd-mob-greet .greet-summary{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.otd-mob-greet .greet-summary b{ color: #fff; font-weight: 700; }

/* Quick actions strip — yatay scroll chips */
.otd-mob-quick{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.otd-mob-quick::-webkit-scrollbar{ display: none; }
.otd-mob-quick a{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--od-line);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--od-ink);
  text-decoration: none;
  transition: transform .15s ease;
}
.otd-mob-quick a:active{ transform: scale(.95); }
.otd-mob-quick a i{ font-size: 16px; }
.otd-mob-quick a.primary{ background: var(--od-green-soft); border-color: var(--od-green-soft); color: var(--od-green); }
.otd-mob-quick a.warn{ background: #FEF4E6; border-color: #FEF4E6; color: var(--od-warning); }

/* Stat grid — 2 kolon yoğun */
.otd-mob-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.otd-mob-stat{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: 14px;
  padding: 12px 12px 10px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
}
.otd-mob-stat:active{ transform: scale(.98); }
.otd-mob-stat .ms-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.otd-mob-stat .ms-icon{
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 14px;
}
.otd-mob-stat .ms-icon.green{ background: var(--od-green-soft); color: var(--od-green); }
.otd-mob-stat .ms-icon.blue{ background: #EAF4FE; color: var(--od-info); }
.otd-mob-stat .ms-icon.orange{ background: #FEF4E6; color: var(--od-warning); }
.otd-mob-stat .ms-icon.purple{ background: #F4F0FF; color: var(--od-purple); }
.otd-mob-stat .ms-label{
  font-size: 10.5px;
  font-weight: 600;
  color: var(--od-ink-soft);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.otd-mob-stat .ms-value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.05;
  color: var(--od-ink);
}
.otd-mob-stat .ms-delta{
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
}
.otd-mob-stat .ms-delta.up{ background: #ECFDF3; color: #067647; }
.otd-mob-stat .ms-delta.down{ background: #FEF3F2; color: var(--od-danger); }

/* Section header */
.otd-mob-sec-head{
  display: flex; align-items: center;
  margin: 16px 0 10px;
  gap: 10px;
}
.otd-mob-sec-head h3{
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.2px;
  flex: 1;
}
.otd-mob-sec-head a{
  font-size: 12px;
  font-weight: 700;
  color: var(--od-green);
  text-decoration: none;
}

/* Horizontal scrollable carousel — yatay kart kaydırma */
.otd-mob-hscroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -14px 14px;
  padding: 0 14px 6px;
}
.otd-mob-hscroll::-webkit-scrollbar{ display: none; }
.otd-mob-hscroll > *{
  scroll-snap-align: start;
  flex: 0 0 78%;
  max-width: 280px;
}
.otd-mob-hscroll > *:last-child{ margin-right: 0; }

/* Native list row */
.otd-mob-list{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: 14px;
  overflow: hidden;
}
.otd-mob-list-row{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #F2F4F7;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.otd-mob-list-row:last-child{ border-bottom: none; }
.otd-mob-list-row:active{ background: var(--od-bg); }
.otd-mob-list-row .thumb{
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--od-bg);
  display: grid; place-items: center;
  color: var(--od-ink-soft);
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
}
.otd-mob-list-row .thumb img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.otd-mob-list-row .body{
  flex: 1; min-width: 0;
}
.otd-mob-list-row .body b{
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--od-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.1px;
}
.otd-mob-list-row .body small{
  display: block;
  font-size: 12px;
  color: var(--od-ink-soft);
  margin-top: 2px;
}
.otd-mob-list-row .right{
  text-align: right;
  flex-shrink: 0;
}
.otd-mob-list-row .right b{
  font-size: 13px;
  font-weight: 700;
  color: var(--od-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.otd-mob-list-row .right .badge-x{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.otd-mob-list-row > .ri-arrow-right-s-line{
  font-size: 20px;
  color: #98A2B3;
  flex-shrink: 0;
}

/* Banner mini for mobile */
.otd-mob-banner{
  position: relative;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--od-bg);
}
.otd-mob-banner .carousel,
.otd-mob-banner .carousel-inner,
.otd-mob-banner .carousel-item{ height: 100% !important; }
.otd-mob-banner img{
  width: 100%; height: 100%;
  object-fit: cover !important;
}

/* Opportunity card mini */
.otd-mob-opp{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: 14px;
  padding: 12px;
  display: flex; gap: 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.otd-mob-opp:before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--od-warning), var(--od-danger));
}
.otd-mob-opp .img{
  width: 56px; height: 56px;
  background: var(--od-bg);
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.otd-mob-opp .img img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.otd-mob-opp .body{
  flex: 1; min-width: 0;
}
.otd-mob-opp .body .badge-trend{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FEF4E6;
  color: var(--od-warning);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.otd-mob-opp .body b{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--od-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otd-mob-opp .body small{
  font-size: 11.5px;
  color: var(--od-ink-soft);
  display: block;
  margin-top: 2px;
}
.otd-mob-opp .meta{
  display: flex; gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
}
.otd-mob-opp .meta span{ color: var(--od-ink-soft); }
.otd-mob-opp .meta b{ color: var(--od-green); font-weight: 700; }

/* Mobile-friendly form inputs (autoplay): forms inside .otd-mobile-shell */
body.otd-mobile-shell .form-control,
body.otd-mobile-shell .form-select{
  font-size: 16px !important; /* iOS zoom prevention */
  padding: 12px 14px !important;
  border-radius: 11px !important;
}
body.otd-mobile-shell .btn{
  padding: 10px 16px !important;
  border-radius: 11px !important;
}

/* ===========================================================
   SearchPanel ürün kartı — mobil sıkılaştırma
   - Kart edge-to-edge
   - Sol renk şeridi gizli (yer kazanır)
   - Tablo fixed-layout, yatay scroll yok
   - 3 ödeme bandı desktop gibi temiz beyaz kart
=========================================================== */
@media (max-width: 768px){
  /* Yatay scroll'u tamamen kapat */
  html, body.otd-mobile-shell{
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body.otd-mobile-shell .main-content,
  body.otd-mobile-shell .page-content,
  body.otd-mobile-shell #resultPannel,
  body.otd-mobile-shell #productListContainer{
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Page-content padding'ini düşür — kart çok daha geniş kullansın */
  body.otd-mobile-shell .page-content{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* SearchPanel üst kontrol kartı — mobilde ferah gözüksün */
  body.otd-mobile-shell .card .card-header{ padding: 12px !important; }
  body.otd-mobile-shell .card .card-body{ padding: 12px !important; }

  /* Sonuç kartı: edge-to-edge */
  body.otd-mobile-shell #resultPannel,
  body.otd-mobile-shell #productListContainer{
    margin-left: -2px;
    margin-right: -2px;
  }
  body.otd-mobile-shell #resultPannel #searchResult,
  body.otd-mobile-shell #productListContainer #searchResult{
    padding: 0 !important;
  }
  body.otd-mobile-shell #resultPannel .card.ribbon-box,
  body.otd-mobile-shell #productListContainer .card.ribbon-box{
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  body.otd-mobile-shell #resultPannel .card.ribbon-box > .card-body,
  body.otd-mobile-shell #productListContainer .card.ribbon-box > .card-body{
    padding: 12px !important;
  }

  /* Sol renkli stripe gizli */
  body.otd-mobile-shell #resultPannel .card.ribbon-box[class*="border-info"]:before,
  body.otd-mobile-shell #resultPannel .card.ribbon-box[class*="border-warning"]:before,
  body.otd-mobile-shell #productListContainer .card.ribbon-box[class*="border-info"]:before,
  body.otd-mobile-shell #productListContainer .card.ribbon-box[class*="border-warning"]:before{
    display: none !important;
  }

  /* "Kampanya" ve "Fırsat" rozetleri küçük ve sağ üstte */
  body.otd-mobile-shell #resultPannel .ribbon,
  body.otd-mobile-shell #productListContainer .ribbon{
    font-size: 10px !important;
    padding: 3px 8px !important;
    top: 8px !important;
    left: 8px !important;
  }
  body.otd-mobile-shell #resultPannel .ribbon-three,
  body.otd-mobile-shell #productListContainer .ribbon-three{
    font-size: 10px !important;
    padding: 3px 8px !important;
    top: 8px !important;
    right: 8px !important;
  }

  /* 3 kolonlu yerleşim mobilde dikey istif (zaten kırılıyor ama kenar boşluğu sıfırla) */
  body.otd-mobile-shell #resultPannel #searchResult > .row,
  body.otd-mobile-shell #productListContainer #searchResult > .row{
    margin: 0 !important;
    --bs-gutter-x: 0;
  }
  body.otd-mobile-shell #resultPannel #searchResult .col-md-2,
  body.otd-mobile-shell #resultPannel #searchResult .col-md-5,
  body.otd-mobile-shell #productListContainer #searchResult .col-md-2,
  body.otd-mobile-shell #productListContainer #searchResult .col-md-5{
    padding: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Ürün resmi kompakt */
  body.otd-mobile-shell #resultPannel .image-container,
  body.otd-mobile-shell #productListContainer .image-container{
    height: 80px !important;
    border-radius: 8px;
  }
  body.otd-mobile-shell #resultPannel .image-container img,
  body.otd-mobile-shell #productListContainer .image-container img{
    max-height: 70px !important;
  }

  /* Ürün adı + kod sıkıştır */
  body.otd-mobile-shell #resultPannel #searchResult a.translate-only,
  body.otd-mobile-shell #productListContainer #searchResult a.translate-only{
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .fw-bold,
  body.otd-mobile-shell #productListContainer #searchResult .fw-bold{
    font-size: 10px !important;
    margin-top: 4px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult p,
  body.otd-mobile-shell #productListContainer #searchResult p{
    font-size: 12px !important;
  }

  /* Tablo — fixed layout, kolon genişlikleri sabit, scroll yok */
  body.otd-mobile-shell #resultPannel #searchResult .table-card,
  body.otd-mobile-shell #productListContainer #searchResult .table-card{
    overflow: hidden !important;
    width: 100% !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table{
    table-layout: fixed !important;
    width: 100% !important;
  }

  /* Kolon genişlikleri (Mağaza | Stok | Termin | Fiyat | Adet | Sepete) */
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(1),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(1){ width: 22%; }
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(2),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(2){ width: 12%; }
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(3),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(3){ width: 18%; }
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(4),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(4){ width: 22%; }
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(5),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(5){ width: 14%; }
  body.otd-mobile-shell #resultPannel #searchResult .table thead th:nth-child(6),
  body.otd-mobile-shell #productListContainer #searchResult .table thead th:nth-child(6){ width: 12%; }

  /* Hücre içerik ellipsize */
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table tbody td:first-child a,
  body.otd-mobile-shell #productListContainer #searchResult .table tbody td:first-child a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    font-size: 11px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table thead.table-light th,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table thead.table-light th{
    padding: 6px 4px !important;
    font-size: 9.5px !important;
    letter-spacing: .2px;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td{
    padding: 8px 4px !important;
    font-size: 11.5px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td.notranslate,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td.notranslate,
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td[class*="notranslate"],
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td[class*="notranslate"]{
    min-width: 0 !important;
    font-size: 12px !important;
    padding-right: 4px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table .txtOrderQantity,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table .txtOrderQantity{
    width: 42px !important;
    height: 26px !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
  /* Sepete butonu — mobilde sadece ikon (font-size:0 + ::before content) */
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td .btn,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td .btn{
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td .btn:before,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td .btn:before{
    content: "+";
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td .btn.btn-success:before,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td .btn.btn-success:before{
    content: "✓";
    font-size: 16px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td .ri-star-fill,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td .ri-star-fill{
    font-size: 12px !important;
  }

  /* Bayrak da küçül */
  body.otd-mobile-shell #resultPannel #searchResult img[src*="/country/"],
  body.otd-mobile-shell #productListContainer #searchResult img[src*="/country/"]{
    width: 14px !important; height: 10px !important;
  }

  /* OEM listesi — kompakt chip'ler */
  body.otd-mobile-shell #resultPannel .oemArea .badge,
  body.otd-mobile-shell #productListContainer .oemArea .badge,
  body.otd-mobile-shell #resultPannel .oemArea .list-group-item,
  body.otd-mobile-shell #productListContainer .oemArea .list-group-item{
    padding: 2px 7px !important;
    font-size: 10px !important;
  }

  /* ÖDEME satırı — 3 chip eşit, küçük yazı, taşma yok */
  body.otd-mobile-shell #resultPannel #searchResult .row.mt-4,
  body.otd-mobile-shell #productListContainer #searchResult .row.mt-4{
    margin-top: 10px !important;
    --bs-gutter-x: 6px;
    --bs-gutter-y: 6px;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  /* 3 ödeme bandı — premium mobil görünüm (renk şeridi, ikon, hiyerarşi) */
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    max-width: none !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea .border.border-dashed,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea .border.border-dashed{
    padding: 8px 6px 10px !important;
    border-radius: 11px !important;
  }
  body.otd-mobile-shell .otd-pay-icon{
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    margin-bottom: 3px !important;
    border-radius: 6px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea p,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea p{
    font-size: 9px !important;
    letter-spacing: .3px !important;
    margin: 0 0 2px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea h5,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea h5{
    font-size: 13px !important;
    letter-spacing: -.5px !important;
  }

  /* === Mobilde "No" + "T.Süresi" sütunlarını birleştir (JS post-process eder) === */
  /* Birinci kolon — stacked content */
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td:first-child,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td:first-child{
    white-space: normal !important;
    padding: 6px 4px !important;
    line-height: 1.25;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td:first-child a,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td:first-child a{
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--od-ink) !important;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td:first-child .otd-mob-termin,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td:first-child .otd-mob-termin{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    color: var(--od-ink-soft);
    font-weight: 500;
    text-transform: none;
    line-height: 1.1;
    background: var(--od-bg);
    padding: 1.5px 5px;
    border-radius: 999px;
    white-space: nowrap;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table tbody td:first-child .otd-mob-termin i,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table tbody td:first-child .otd-mob-termin i{
    font-size: 10px;
    color: var(--od-warning);
  }

  /* T.Süresi sütununu (3.) gizle — JS birinci kolona taşıdı */
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(3),
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] tbody td:nth-child(3),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(3),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] tbody td:nth-child(3){
    display: none !important;
  }
  /* Kolon genişliklerini 5'li yapıya yeniden hizala (3. kolon gitti) */
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(1),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(1){ width: 30% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(2),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(2){ width: 14% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(4),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(4){ width: 28% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(5),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(5){ width: 16% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1"] thead th:nth-child(6),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1"] thead th:nth-child(6){ width: 12% !important; }

  /* Mobile 4-col layout (SearchPanel/Index.Mobile.cshtml has 5 cols: No|T.Süresi|Fiyat|Adet|Sepete) */
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(2),
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] tbody td:nth-child(2),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(2),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] tbody td:nth-child(2){
    display: none !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(1),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(1){ width: 32% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(3),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(3){ width: 30% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(4),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(4){ width: 22% !important; }
  body.otd-mobile-shell #resultPannel #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(5),
  body.otd-mobile-shell #productListContainer #searchResult .table[data-otd-merged="1-mobile5"] thead th:nth-child(5){ width: 16% !important; }

  /* Önerilen (3 Taksit) — küçük rozet, abartmadan */
  body.otd-mobile-shell .paymentArea.otd-pay-featured .border.border-dashed:after{
    content: "★" !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
    top: -7px !important;
    line-height: 1.2 !important;
  }
  body.otd-mobile-shell .paymentArea.otd-pay-featured h5{ font-size: 13.5px !important; }
  body.otd-mobile-shell .paymentArea.otd-pay-featured .otd-pay-perk{ display: none !important; }

  /* "Diğer Teklifler" footer ortala */
  body.otd-mobile-shell #resultPannel .btnOfferLoadAll,
  body.otd-mobile-shell #productListContainer .btnOfferLoadAll{
    width: 100% !important;
    text-align: center;
    justify-content: center;
    font-size: 11px !important;
    padding: 8px !important;
  }
}

/* Çok dar ekranlar için ek (≤360px) */
@media (max-width: 360px){
  body.otd-mobile-shell #resultPannel #searchResult .table-card .table thead.table-light th,
  body.otd-mobile-shell #productListContainer #searchResult .table-card .table thead.table-light th{
    font-size: 9px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea h5,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea h5{
    font-size: 11.5px !important;
  }
  body.otd-mobile-shell #resultPannel #searchResult .paymentArea p,
  body.otd-mobile-shell #productListContainer #searchResult .paymentArea p{
    font-size: 8.5px !important;
  }
}

/* Mobil sayfalarda alttaki FAB'ı (otd-fab) sakla — bottom nav ile çakışıyor */
body.otd-mobile-shell .otd-fab{ display: none !important; }

/* Mobil topbar'daki ad değiştirilebilir (page-aware) */
.otd-mob-topbar.is-page-title .otd-mob-brand .logo-mark{ display: none; }
.otd-mob-topbar.is-page-title .otd-mob-back{
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--od-ink);
  font-size: 22px;
  margin-left: -10px;
}

/* ===== UTILITY ===== */
.otd-text-grad{
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.otd-divider-dash{ border-top: 1px dashed var(--od-line); margin: 16px 0; }

/* ============================================================
   PSYCHOLOGICAL ENTRY EXPERIENCE
   "Panele girme hissiyatı" katmanı
   ============================================================ */

/* ===== SPLASH OVERLAY (her oturumda 1 kez) ===== */
.otd-splash{
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #0F1B2D 0%, #1A2A47 50%, #0F3A40 100%);
  display: grid; place-items: center;
  z-index: 9998;
  animation: otd-splashOut .6s ease .9s forwards;
}
.otd-splash:before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(10,179,156,.4), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(127,86,217,.3), transparent 50%);
  filter: blur(40px);
}
.otd-splash-logo{
  position: relative;
  display: grid; place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F79009 0%, #FFB020 50%, #FFD56B 100%);
  color: #fff;
  font-size: 38px; font-weight: 800;
  font-family: 'Inter', sans-serif;
  box-shadow:
    0 16px 64px rgba(247,144,9,.55),
    inset 0 -8px 16px rgba(0,0,0,.15),
    inset 0 6px 14px rgba(255,255,255,.35);
  animation: otd-splashLogo 1.2s cubic-bezier(.18,.89,.32,1.28);
  letter-spacing: -1px;
}
.otd-splash-logo:before{
  /* iç boşluk — O'nun deliği gibi gözükmesin diye letter-form kullanılıyor */
  content: "";
}
.otd-splash-logo:after{
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 3px solid rgba(247,144,9,.5);
  border-top-color: transparent;
  border-right-color: transparent;
  animation: otd-splashRingSpin 1.6s linear infinite;
}
@keyframes otd-splashRingSpin{
  to{ transform: rotate(360deg) }
}
@keyframes otd-splashLogo{
  0%{ transform: scale(.4) rotate(-180deg); opacity: 0 }
  60%{ transform: scale(1.1) rotate(10deg); opacity: 1 }
  100%{ transform: scale(1) rotate(0); opacity: 1 }
}
@keyframes otd-splashOut{
  to{ opacity: 0; visibility: hidden; pointer-events: none }
}

/* ===== ORANGE "O" LOADER — modern cam efektli işlem kartı ===== */
#preloader2{
  background: rgba(15, 27, 45, .50) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  /* Global.js inline opacity 0.50/0.00 set eder; visibility toggle ile show/hide olsun */
  opacity: 1 !important;
  transition: opacity .25s ease, visibility .25s ease;
}
#preloader2[style*="visibility:hidden"],
#preloader2[style*="visibility: hidden"]{
  opacity: 0 !important;
  pointer-events: none;
}
#preloader2 #status{
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  left: 50% !important;
  top: 50% !important;
}

/* Glassmorphic kart */
.otd-loader-o{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
  padding: 26px 32px 22px;
  background: rgba(20, 32, 52, .82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(247, 144, 9, .12),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: otd-loaderCardIn .35s cubic-bezier(.18, .89, .32, 1.28);
}
@keyframes otd-loaderCardIn{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(.92) }
  to{ opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
/* #status'un translate'ini koru ama animasyondan etkilenmesin */
#preloader2 #status{ animation: none; }

/* O harfi + halkalar — stack'lenen container */
.otd-loader-o .o-stack{
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.otd-loader-o .o-letter{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F79009 0%, #FFB020 50%, #FFD56B 100%);
  display: grid; place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  letter-spacing: -.6px;
  box-shadow:
    0 6px 20px rgba(247, 144, 9, .55),
    inset 0 -4px 10px rgba(0, 0, 0, .18),
    inset 0 3px 8px rgba(255, 255, 255, .35);
  animation: otd-loaderPulse 1.6s ease-in-out infinite;
  z-index: 2;
}
.otd-loader-o .o-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #F79009;
  border-right-color: #FFB020;
  animation: otd-loaderSpin .9s linear infinite;
}
.otd-loader-o .o-ring.outer{
  inset: -8px;
  border-width: 1.5px;
  border-top-color: rgba(247, 144, 9, .55);
  border-right-color: transparent;
  border-bottom-color: rgba(255, 176, 32, .35);
  border-left-color: transparent;
  animation-duration: 1.8s;
  animation-direction: reverse;
}

/* Ana mesaj satırı */
.otd-loader-o .o-label{
  position: relative;
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.2px;
  opacity: 1;
  white-space: nowrap;
  text-align: center;
  text-transform: none;
  transition: opacity .25s ease, transform .25s ease;
  margin: 0 0 14px;
}
.otd-loader-o .o-label.is-fading{
  opacity: 0;
  transform: translateY(4px);
}

/* İndeterminate progress bar */
.otd-loader-o .o-progress{
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.otd-loader-o .o-progress span{
  position: absolute;
  top: 0; bottom: 0;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247, 144, 9, .4) 30%,
    #FFB020 50%,
    rgba(247, 144, 9, .4) 70%,
    transparent 100%);
  animation: otd-progressMove 1.6s cubic-bezier(.65, 0, .35, 1) infinite;
  filter: drop-shadow(0 0 6px rgba(247, 144, 9, .55));
}
@keyframes otd-progressMove{
  0%   { left: -42%; }
  100% { left: 100%; }
}

/* İpucu altyazı — 15 sn sonra görünür */
.otd-loader-o .o-hint{
  position: relative;
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease, max-height .35s ease, margin-top .35s ease;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  pointer-events: none;
}
.otd-loader-o .o-hint.is-shown{
  opacity: 1;
  max-height: 24px;
  margin-top: 8px;
  pointer-events: auto;
}

@keyframes otd-loaderSpin{ to{ transform: rotate(360deg) } }
@keyframes otd-loaderPulse{
  0%, 100%{ transform: scale(1); filter: brightness(1) }
  50%{ transform: scale(.92); filter: brightness(1.15) }
}
.otd-splash-text{
  position: absolute;
  bottom: 32%;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  animation: otd-splashTextIn .6s ease .4s both;
}
@keyframes otd-splashTextIn{
  from{ opacity: 0; transform: translateY(10px) }
  to{ opacity: 1; transform: translateY(0) }
}

/* ===== CASCADE REVEAL (sayfa elementleri sırayla iner) ===== */
.otd-reveal{
  opacity: 0;
  transform: translateY(24px);
  animation: otd-revealIn .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--otd-delay, 0ms);
}
.otd-splash + * .otd-reveal,  /* splash sonrası gecikmeli başla */
body.has-splash .otd-reveal{
  animation-delay: calc(var(--otd-delay, 0ms) + 1.4s);
}
@keyframes otd-revealIn{
  from{ opacity: 0; transform: translateY(24px) }
  to{ opacity: 1; transform: translateY(0) }
}

/* ===== PARTICLE LAYER (hero içinde) ===== */
.otd-particles{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.otd-particles span{
  position: absolute;
  display: block;
  width: 4px; height: 4px;
  background: rgba(10,179,156,.4);
  border-radius: 50%;
  bottom: -20px;
  animation: otd-particle-float linear infinite;
  filter: blur(1px);
}
.otd-particles span:nth-child(1){ left: 8%;  width: 6px; height: 6px; animation-duration: 14s; animation-delay: 0s;  background: rgba(10,179,156,.5) }
.otd-particles span:nth-child(2){ left: 18%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 2s;  background: rgba(127,86,217,.4) }
.otd-particles span:nth-child(3){ left: 28%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: 4s;  background: rgba(247,144,9,.3) }
.otd-particles span:nth-child(4){ left: 42%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 1s;  background: rgba(10,179,156,.4) }
.otd-particles span:nth-child(5){ left: 58%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 5s;  background: rgba(255,255,255,.3) }
.otd-particles span:nth-child(6){ left: 68%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 3s;  background: rgba(127,86,217,.3) }
.otd-particles span:nth-child(7){ left: 78%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 6s;  background: rgba(10,179,156,.5) }
.otd-particles span:nth-child(8){ left: 88%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 2.5s; background: rgba(255,255,255,.2) }
.otd-particles span:nth-child(9){ left: 95%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: 7s;  background: rgba(247,144,9,.3) }
@keyframes otd-particle-float{
  0%   { transform: translateY(0) translateX(0); opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0 }
}

/* ===== LIVE PRESENCE CHIP (hero) ===== */
.otd-presence{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  position: relative; z-index: 2;
}
.otd-presence .pulse{
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--od-green);
}
.otd-presence .pulse:after{
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--od-green);
  animation: otd-presencePulse 1.6s ease-out infinite;
}
@keyframes otd-presencePulse{
  0%{ transform: scale(.6); opacity: .8 }
  100%{ transform: scale(2.2); opacity: 0 }
}
.otd-presence b{ color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== DAILY QUEST CARD ===== */
.otd-quest-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--od-r-lg);
  padding: 16px;
  min-width: 240px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.otd-quest-card:before{
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--od-green), transparent);
  animation: otd-questScan 3s ease-in-out infinite;
}
@keyframes otd-questScan{
  0%, 100%{ transform: translateX(-100%) }
  50%{ transform: translateX(100%) }
}
.otd-quest-card .qhead{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.otd-quest-card .qhead i{
  font-size: 16px;
  color: var(--od-gold);
}
.otd-quest-card .qhead h6{
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.otd-quest-card .qhead .reward{
  margin-left: auto;
  font-size: 11px;
  color: var(--od-gold);
  font-weight: 700;
}
.otd-quest-list{
  display: flex; flex-direction: column;
  gap: 8px;
}
.otd-quest-item{
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}
.otd-quest-check{
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: .25s;
}
.otd-quest-item.done .otd-quest-check{
  background: var(--od-green);
  border-color: var(--od-green);
  color: #fff;
}
.otd-quest-item.done .qtext{
  text-decoration: line-through;
  opacity: .55;
}
.otd-quest-item .qtext{ flex: 1; line-height: 1.4; }
.otd-quest-item .qprog{
  font-size: 11px;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.otd-quest-item .qprog.active{ color: var(--od-green); }

/* ===== BREATHING PRIMARY CTA ===== */
.otd-cta-pulse{
  position: relative;
  animation: otd-breathe 2.4s ease-in-out infinite;
}
@keyframes otd-breathe{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(10,179,156,.5) }
  50%{ box-shadow: 0 0 0 10px rgba(10,179,156,0) }
}

/* ===== CONFETTI CANVAS ===== */
.otd-confetti{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9997;
}

/* ===== TIME-AWARE GREETING TONE ===== */
.otd-greet-mood{
  display: inline-block;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px 12px;
  border-radius: 999px;
  margin-top: 8px;
  font-weight: 500;
}

/* ============================================================
   SEARCHPANEL — sonuç listesi sakinleştirme
   #resultPannel (AJAX) + _searchResult.cshtml (server-rendered)
   ============================================================ */

/* Üst arama formunu kompakt hale getir */
#resultPannel,
#productListContainer{ padding: 0 !important; }

/* Üst kontrol kartının padding'ini düzleştir */
.main-content .card > .card-header > .row > [class*="col-"] .form-check-inline{
  margin-right: 1rem;
}

/* ====== Result card — tek tip sakin tasarım ====== */
#resultPannel .card.ribbon-box,
#resultPannel .card.shadow-lg,
#productListContainer .card.ribbon-box{
  border: 1px solid var(--od-line) !important;
  box-shadow: var(--od-shadow-sm) !important;
  border-radius: var(--od-r-lg) !important;
  margin-bottom: 12px !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
#resultPannel .card.ribbon-box:hover,
#productListContainer .card.ribbon-box:hover{
  box-shadow: var(--od-shadow-md) !important;
  transform: translateY(-1px);
}
/* Sol kenarda ince renk şeridi (border-info / border-warning yerine) */
#resultPannel .card.ribbon-box[class*="border-info"]:before,
#resultPannel .card.ribbon-box[class*="border-warning"]:before,
#productListContainer .card.ribbon-box[class*="border-info"]:before,
#productListContainer .card.ribbon-box[class*="border-warning"]:before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
#resultPannel .card.ribbon-box[class*="border-info"]:before,
#productListContainer .card.ribbon-box[class*="border-info"]:before{ background: var(--od-info); }
#resultPannel .card.ribbon-box[class*="border-warning"]:before,
#productListContainer .card.ribbon-box[class*="border-warning"]:before{ background: var(--od-warning); }

/* Kalın border-1 border-X efektini bastır */
#resultPannel .card.border-1,
#productListContainer .card.border-1{
  border-width: 1px !important;
  border-color: var(--od-line) !important;
}

/* Card body padding inde dengeli */
#resultPannel #searchResult > .row,
#productListContainer #searchResult > .row{ margin: 0; }
#resultPannel .card.ribbon-box > .card-body,
#productListContainer .card.ribbon-box > .card-body{ padding: 16px 18px !important; }
#resultPannel .ribbon-content,
#productListContainer .ribbon-content{ margin-top: 0 !important; }

/* Eski "Kampanya" büyük ribbon'u küçülüt */
#resultPannel .ribbon,
#productListContainer .ribbon{
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: .3px;
  box-shadow: none !important;
  background: var(--od-warning) !important;
  color: #fff !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3;
}
#resultPannel .ribbon:before,
#resultPannel .ribbon:after,
#productListContainer .ribbon:before,
#productListContainer .ribbon:after{ display: none !important; }

/* "Fırsat" köşe üçgeni — temiz badge'e dönüştür */
#resultPannel .ribbon-three,
#productListContainer .ribbon-three{
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  background: var(--od-warning) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: auto !important; height: auto !important;
  z-index: 3;
}
#resultPannel .ribbon-three:before,
#resultPannel .ribbon-three:after,
#productListContainer .ribbon-three:before,
#productListContainer .ribbon-three:after{ display: none !important; }
#resultPannel .ribbon-three span,
#productListContainer .ribbon-three span{
  position: static !important;
  display: inline !important;
  padding: 0 !important;
  font: inherit !important;
  background: transparent !important;
  width: auto !important; height: auto !important;
  transform: none !important;
}

/* Resim kutusu — daha küçük, sade fon */
#resultPannel .image-container,
#productListContainer .image-container{
  height: 110px !important;
  background: var(--od-bg) !important;
  border-radius: 10px;
  border: 1px solid var(--od-line);
  overflow: hidden;
}
#resultPannel .image-container img,
#productListContainer .image-container img{
  max-height: 90px !important;
  max-width: 80% !important;
  object-fit: contain;
}

/* Ürün adı ve kod bloğu */
#resultPannel #searchResult p,
#productListContainer #searchResult p{
  margin-bottom: 4px !important;
  font-size: 13px !important;
}
#resultPannel #searchResult a.translate-only,
#productListContainer #searchResult a.translate-only{
  font-weight: 600 !important;
  color: var(--od-ink) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  display: inline-block;
}
#resultPannel #searchResult a.translate-only:hover,
#productListContainer #searchResult a.translate-only:hover{
  color: var(--od-green) !important;
  text-decoration: none;
}
#resultPannel #searchResult .fw-bold,
#productListContainer #searchResult .fw-bold{
  font-size: 11px !important;
  text-transform: uppercase;
  color: var(--od-ink-soft) !important;
  letter-spacing: .4px;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}

/* OEM listesi — sade chip'ler */
#resultPannel .oemArea,
#productListContainer .oemArea{
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 4px;
  padding-top: 6px;
}
#resultPannel .oemArea .list-group-item,
#productListContainer .oemArea .list-group-item,
#resultPannel .oemArea .badge,
#productListContainer .oemArea .badge{
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: none !important;
  background: var(--od-bg) !important;
  color: var(--od-ink-soft) !important;
  margin: 0 !important;
}
#resultPannel .oemArea .badge.bg-success-subtle,
#productListContainer .oemArea .badge.bg-success-subtle{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
}
#resultPannel .oemArea .followProduct,
#productListContainer .oemArea .followProduct{
  background: #FEF3F2 !important;
  color: var(--od-danger) !important;
}
#resultPannel .oemArea .followProduct:hover,
#productListContainer .oemArea .followProduct:hover{
  background: var(--od-danger) !important;
  color: #fff !important;
}

/* Offer tablosu */
#resultPannel #searchResult .table-card .table,
#productListContainer #searchResult .table-card .table{
  font-size: 12.5px !important;
  margin-bottom: 0 !important;
}
#resultPannel #searchResult .table-card .table thead.table-light th,
#productListContainer #searchResult .table-card .table thead.table-light th{
  background: #FAFBFC !important;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700 !important;
  color: var(--od-ink-soft) !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--od-line) !important;
  white-space: nowrap;
}
#resultPannel #searchResult .table-card .table tbody td,
#productListContainer #searchResult .table-card .table tbody td{
  padding: 10px !important;
  border-color: #F2F4F7 !important;
  vertical-align: middle;
  white-space: nowrap;
}

/* Fiyat sütunu — özel genişlik + vurgu */
#resultPannel #searchResult .table-card .table tbody td.notranslate,
#resultPannel #searchResult .table-card .table tbody td[class*="notranslate"],
#productListContainer #searchResult .table-card .table tbody td.notranslate,
#productListContainer #searchResult .table-card .table tbody td[class*="notranslate"]{
  min-width: 120px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--od-ink) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  padding-right: 14px !important;
  letter-spacing: -.2px;
}

/* Stok ve termin sütunlarını dar tut ki fiyata yer kalsın */
#resultPannel #searchResult .table-card .table tbody td:nth-child(2),
#productListContainer #searchResult .table-card .table tbody td:nth-child(2),
#resultPannel #searchResult .table-card .table tbody td:nth-child(3),
#productListContainer #searchResult .table-card .table tbody td:nth-child(3){
  width: 1%;
}
#resultPannel #searchResult .table-card .table tbody td .badge.bg-success,
#productListContainer #searchResult .table-card .table tbody td .badge.bg-success{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}
#resultPannel #searchResult .table-card .table tbody td a.notranslate,
#productListContainer #searchResult .table-card .table tbody td a.notranslate{
  color: var(--od-ink) !important;
  font-weight: 600 !important;
  text-decoration: none;
}
#resultPannel #searchResult .table-card .table tbody td a.notranslate:hover,
#productListContainer #searchResult .table-card .table tbody td a.notranslate:hover{
  color: var(--od-green) !important;
}
#resultPannel #searchResult .table-card .table .txtOrderQantity,
#productListContainer #searchResult .table-card .table .txtOrderQantity{
  width: 64px !important;
  height: 30px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  text-align: center;
}
#resultPannel #searchResult .table-card .table tbody td .btn,
#productListContainer #searchResult .table-card .table tbody td .btn{
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
#resultPannel #searchResult .table-card .table tbody td .btn-light,
#productListContainer #searchResult .table-card .table tbody td .btn-light{
  background: var(--od-green-soft) !important;
  color: var(--od-green) !important;
  border: none !important;
  font-weight: 700 !important;
}
#resultPannel #searchResult .table-card .table tbody td .btn-light:hover,
#productListContainer #searchResult .table-card .table tbody td .btn-light:hover{
  background: var(--od-green) !important;
  color: #fff !important;
}

/* "Diğer Teklifler" footer link'i */
#resultPannel .btnOfferLoadAll,
#productListContainer .btnOfferLoadAll{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--od-green) !important;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: .15s;
}
#resultPannel .btnOfferLoadAll:hover,
#productListContainer .btnOfferLoadAll:hover{
  background: var(--od-green-soft) !important;
}
#resultPannel .btnOfferLoadAll:before,
#productListContainer .btnOfferLoadAll:before{
  content: "↓"; margin-right: 4px;
}

/* Satır zebra renklendirme — yumuşat */
#resultPannel #searchResult tr[style*="background-color"],
#productListContainer #searchResult tr[style*="background-color"]{
  background-color: transparent !important;
}
#resultPannel #searchResult tbody tr:nth-child(even),
#productListContainer #searchResult tbody tr:nth-child(even){
  background-color: #FAFBFC !important;
}
#resultPannel #searchResult tbody tr:hover,
#productListContainer #searchResult tbody tr:hover{
  background-color: var(--od-green-soft) !important;
  transition: background-color .15s ease;
}

/* Ülke bayrağı */
#resultPannel #searchResult img[src*="/country/"],
#productListContainer #searchResult img[src*="/country/"]{
  width: 16px !important; height: 11px !important;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* Çok Al Az Öde yıldızı */
#resultPannel #searchResult .ri-star-fill,
#productListContainer #searchResult .ri-star-fill{
  color: var(--od-warning) !important;
  font-size: 14px;
  margin-left: 4px;
}

/* Payment grid — premium 3'lü ödeme bandı */
#resultPannel #searchResult .row.mt-4,
#productListContainer #searchResult .row.mt-4{
  margin-top: 14px !important;
  --bs-gutter-y: 8px;
  --bs-gutter-x: 8px;
}
#resultPannel #searchResult .paymentArea,
#productListContainer #searchResult .paymentArea{
  flex: 1 1 0 !important;
  min-width: 110px !important;
}
#resultPannel #searchResult .paymentArea .border.border-dashed,
#productListContainer #searchResult .paymentArea .border.border-dashed{
  background: linear-gradient(180deg, #fff 0%, #FAFBFC 100%) !important;
  border: 1px solid var(--od-line) !important;
  border-radius: 12px !important;
  padding: 10px 10px 12px !important;
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  cursor: pointer;
  isolation: isolate;
}
#resultPannel #searchResult .paymentArea .border.border-dashed:hover,
#productListContainer #searchResult .paymentArea .border.border-dashed:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,24,40,.07);
}
/* Tip bazlı üst renk şeridi */
#resultPannel #searchResult .paymentArea .border.border-dashed:before,
#productListContainer #searchResult .paymentArea .border.border-dashed:before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--od-line);
  z-index: 1;
}
#resultPannel #searchResult .paymentArea[data-pay-type="taksit"] .border.border-dashed:before,
#productListContainer #searchResult .paymentArea[data-pay-type="taksit"] .border.border-dashed:before{
  background: linear-gradient(90deg, var(--od-green), #13D9BD);
}
#resultPannel #searchResult .paymentArea[data-pay-type="tekcekim"] .border.border-dashed:before,
#productListContainer #searchResult .paymentArea[data-pay-type="tekcekim"] .border.border-dashed:before{
  background: linear-gradient(90deg, var(--od-info), #7BB7F5);
}
#resultPannel #searchResult .paymentArea[data-pay-type="havale"] .border.border-dashed:before,
#productListContainer #searchResult .paymentArea[data-pay-type="havale"] .border.border-dashed:before{
  background: linear-gradient(90deg, var(--od-purple), #A685E2);
}
#resultPannel #searchResult .paymentArea[data-pay-type="kapida"] .border.border-dashed:before,
#productListContainer #searchResult .paymentArea[data-pay-type="kapida"] .border.border-dashed:before{
  background: linear-gradient(90deg, var(--od-warning), #FFB85C);
}

/* Icon row */
.otd-pay-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  font-size: 14px;
  margin: 0 auto 4px;
  background: var(--od-bg);
  color: var(--od-ink-soft);
  transition: transform .25s ease;
}
.paymentArea[data-pay-type="taksit"] .otd-pay-icon{ background: var(--od-green-soft); color: var(--od-green); }
.paymentArea[data-pay-type="tekcekim"] .otd-pay-icon{ background: #EAF4FE; color: var(--od-info); }
.paymentArea[data-pay-type="havale"] .otd-pay-icon{ background: #F4F0FF; color: var(--od-purple); }
.paymentArea[data-pay-type="kapida"] .otd-pay-icon{ background: #FEF4E6; color: var(--od-warning); }
.paymentArea .border.border-dashed:hover .otd-pay-icon{ transform: scale(1.08) rotate(-6deg); }

/* Label */
#resultPannel #searchResult .paymentArea p,
#productListContainer #searchResult .paymentArea p{
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin: 0 0 4px !important;
  color: var(--od-ink-soft) !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price */
#resultPannel #searchResult .paymentArea h5,
#productListContainer #searchResult .paymentArea h5{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--od-ink) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paymentArea[data-pay-type="taksit"] h5{ color: var(--od-green) !important; }
.paymentArea[data-pay-type="tekcekim"] h5{ color: var(--od-info) !important; }
.paymentArea[data-pay-type="havale"] h5{ color: var(--od-purple) !important; }
.paymentArea[data-pay-type="kapida"] h5{ color: var(--od-warning) !important; }

/* ====== ÖNERİLEN ödeme tipi (3 Taksit) ====== */
.paymentArea.otd-pay-featured .border.border-dashed{
  background: #fff !important;
  border: 1.5px solid var(--od-green) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
  position: relative;
  overflow: visible;
}
/* Glow halkasını ve gölgeyi tamamen kaldır */
.paymentArea.otd-pay-featured .border.border-dashed:before{
  content: none !important;
}
.paymentArea.otd-pay-featured .border.border-dashed:after{
  content: "★ Önerilen";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--od-green) 0%, #13D9BD 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(10,179,156,.4);
  white-space: nowrap;
  text-transform: uppercase;
}
.paymentArea.otd-pay-featured p{
  color: var(--od-green-700) !important;
  font-weight: 700 !important;
}
.paymentArea.otd-pay-featured h5{
  color: var(--od-green) !important;
  font-size: 17px !important;
}
.paymentArea.otd-pay-featured .border.border-dashed:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,179,156,.25) !important;
}

/* "
    " / "komisyonsuz" küçük satır — JS tarafından eklenebilir */
.paymentArea.otd-pay-featured .otd-pay-perk{
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--od-green-700);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Sonuç yok mesajı */
#resultPannel > .d-flex{
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: var(--od-r-lg);
  padding: 18px 22px;
  box-shadow: var(--od-shadow-sm);
  align-items: center;
}
#resultPannel > .d-flex .ri-checkbox-circle-fill{
  font-size: 22px !important;
  color: var(--od-green) !important;
}

/* Mobilde 3 kolonlu yerleşim kırılsın */
@media (max-width: 991.98px){
  #resultPannel #searchResult .col-md-2,
  #resultPannel #searchResult .col-md-5,
  #productListContainer #searchResult .col-md-2,
  #productListContainer #searchResult .col-md-5{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px;
  }
  #resultPannel .image-container,
  #productListContainer .image-container{ height: 90px !important; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .otd-reveal,
  .otd-splash,
  .otd-splash-logo,
  .otd-particles span,
  .otd-cta-pulse,
  .otd-quest-card:before,
  .otd-presence .pulse:after,
  .otd-fire,
  .otd-wave{
    animation: none !important;
  }
  .otd-reveal{ opacity: 1; transform: none; }
  .otd-splash{ display: none; }
}