/* ==========================================================================
   NUMONAY — Sade Kurumsal Tema (açık, minimalist)
   styles.css'den SONRA yüklenir. Yapıyı/işlevi değiştirmez, yalnızca görünümü
   sadeleştirir: tek vurgu rengi, ince çizgiler, hafif gölgeler, dengeli boşluk.
   ========================================================================== */

:root{
  --bg:      #f5f7fa;
  --bg2:     #f1f5f9;
  --card:    #ffffff;
  --card2:   #f8fafc;
  --border:  #e5e9f0;
  --border2: #d5dbe5;
  --text:    #0f172a;
  --sub:     #475569;
  --muted:   #64748b;
  --blue:    #2563eb;
  --purple:  #1e3a8a;
  --grad:    linear-gradient(#2563eb,#2563eb);
  --ok:      #059669;
  --err:     #dc2626;
  --r:       10px;
  --r-lg:    14px;
  --sh:      0 1px 2px rgba(15,23,42,.05);
  --sh-md:   0 4px 14px rgba(15,23,42,.08);
  --sh-lg:   0 16px 40px rgba(15,23,42,.14);
}

html{color-scheme:light}
body{
  background:var(--bg) !important;
  background-image:none !important;
  color:var(--text);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#bfdbfe;color:#0f172a}
::-webkit-scrollbar-thumb{background:#cbd5e1}

/* ---------- Üst bilgi şeridi ---------- */
#liveStockBar{
  background:#0f172a !important;
  border-bottom:0 !important;
  color:#cbd5e1 !important;
  font-weight:500 !important;
}
#liveStockBar > span[style*="opacity"]{display:none}
#liveStockBar span[style*="10b981"]{color:#34d399 !important}
#liveStockBar span[style*="width:7px"]{box-shadow:none !important}

/* ---------- Menü ---------- */
.nav{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
  animation:none;
}
.nav-inner{height:64px}
.logo-num{color:var(--text);font-weight:800;letter-spacing:-.6px}
.logo-onay{color:var(--blue);font-weight:800;letter-spacing:-.6px}
.logo-tag{display:none}
.nav-links a{color:var(--sub);font-weight:500;border-radius:8px}
.nav-links a:hover{background:var(--bg2);color:var(--text)}
.balance-chip{
  background:var(--bg2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;font-weight:600;
}
.burger{color:var(--text)}

/* ---------- Butonlar ---------- */
.btn{border-radius:8px;font-weight:600;background:var(--bg2);color:var(--text);border:1px solid var(--border)}
.btn:hover{transform:none;background:#e8edf4}
.btn-primary{
  background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:none;
}
.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;box-shadow:none}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text)}
.btn-ghost:hover{background:var(--bg2);border-color:var(--border2);color:var(--text)}
.btn-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.btn-danger:hover{background:#fee2e2}
.btn-cancel-passive{background:var(--bg2) !important;color:var(--muted) !important;border:1px solid var(--border2) !important}
.btn-cancel-passive:hover{background:#fef2f2 !important;border-color:#fecaca !important;color:#b91c1c !important}
.btn-cancel-active{background:#dc2626 !important;box-shadow:none !important;color:#fff !important}

/* ---------- Sol panel: servis listesi ---------- */
.side{background:var(--card);border:1px solid var(--border);box-shadow:var(--sh)}
.side-head{border-bottom:1px solid var(--border)}
.side-head h2{font-size:15px;font-weight:700}
.back{background:var(--bg2);border:1px solid var(--border2);color:var(--text);font-weight:600}
.back:hover{background:#e8edf4;border-color:var(--border2);color:var(--text)}
.search{background:var(--card);border:1px solid var(--border2);color:var(--text)}
.search::placeholder{color:#94a3b8}
.search:focus{background:var(--card);border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.item{border-radius:8px}
.item:hover{background:var(--bg2);border-color:transparent}
.item .ic{background:var(--bg2);border:1px solid var(--border)}
.item .pr{color:var(--text)}
.item .nm small{color:var(--muted)}
.empty{color:var(--muted)}

.filter-pill{background:var(--card);border:1px solid var(--border2);color:var(--sub)}
.filter-pill:hover{color:var(--text);border-color:var(--muted)}
.filter-pill.active{background:var(--text);color:#fff;border-color:var(--text)}

.success-pill{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.success-pill.success-top{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;box-shadow:none}
.success-dot-mini{background:#10b981}
.stock-dot-live{box-shadow:none}
.svc-badge.pop{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.svc-badge.fast{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

.item-featured-tr{
  background:#fef2f2 !important;border:1px solid #fecaca !important;
  box-shadow:none !important;transform:none !important;
}
.item-featured-tr:hover{background:#fee2e2 !important;border-color:#fca5a5 !important;box-shadow:none !important}
.badge-featured-tr{background:#dc2626;box-shadow:none}

/* ---------- Ana içerik ---------- */
.content{gap:20px}
.hero{
  background:var(--card);border:1px solid var(--border);box-shadow:var(--sh);
  padding:40px;
}
.hero::before{display:none}
.hero-badge{
  background:var(--bg2);border:1px solid var(--border);color:var(--sub);
  font-weight:600;letter-spacing:.2px;
}
.hero-badge::before{background:var(--ok);box-shadow:none}
.hero h1{font-weight:800;letter-spacing:-1px;color:var(--text)}
.hero h1 span{color:var(--blue) !important}
.hero p{color:var(--sub)}
.hero-bullets{color:var(--text);font-weight:500}
.hero-bullets span span{color:var(--ok) !important}

.quick-svc-card{background:var(--card);border:1px solid var(--border);box-shadow:none}
.quick-svc-card:hover{
  background:var(--card2);border-color:var(--border2);transform:none;box-shadow:var(--sh-md);
}
.quick-svc-icon{background:var(--bg2);border:1px solid var(--border)}

.stats-strip{gap:12px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh)}
.stat-box b{color:var(--text);font-weight:800}
.stat-box span{color:var(--text)}
.stat-box small{color:var(--muted)}

.block{box-shadow:var(--sh);padding:32px}
.block-head h2{font-weight:700;letter-spacing:-.4px}
.block-head .icon{
  background:var(--bg2);border:1px solid var(--border);color:var(--blue);
}
.block-head .icon svg,.feat-item-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.step-card{background:var(--card2);border:1px solid var(--border)}
.step-card:hover{border-color:var(--border2);transform:none}
.step-badge{background:var(--text);color:#fff}
.step-card h3{color:var(--text)}
.step-card p{color:var(--sub)}

.feat-item{background:var(--card2);border:1px solid var(--border)}
.feat-item:hover{border-color:var(--border2);transform:none}
.feat-item-icon{background:var(--card);border:1px solid var(--border);color:var(--blue)}
.feat-item-body h4{color:var(--text)}
.feat-item-body p{color:var(--sub)}

details{background:var(--card);border:1px solid var(--border)}
details[open]{border-color:var(--border2);background:var(--card2)}
summary::after{color:var(--muted)}
details p{color:var(--sub)}
details p strong[style]{color:#b91c1c !important}

/* ---------- Siparişler ---------- */
.order{
  background:var(--card) !important;border:1px solid var(--border) !important;
  box-shadow:var(--sh) !important;
}
.order::before{background:var(--blue)}
.order .num{color:var(--text) !important;background:var(--bg2) !important;border:1px solid var(--border) !important;border-style:solid !important}
.order .num:hover{color:var(--blue) !important}
.code{
  color:#047857 !important;background:#ecfdf5 !important;border:1px solid #a7f3d0 !important;
}
.code:hover{background:#d1fae5 !important}
.spinner{border-color:var(--border2);border-top-color:var(--blue)}
#ordersWrap span[style*="fca5a5"]{color:#b91c1c !important;background:#fef2f2 !important;border-color:#fecaca !important}

.alt-item-card{background:var(--card);border:1px solid var(--border)}
.alt-item-card:hover{border-color:var(--border2);transform:none}
.alt-featured-card{background:#fff7ed;border:1px solid #fed7aa}
.alt-featured-btn{background:var(--blue) !important;box-shadow:none !important;border-radius:8px !important}
.alt-featured-btn:hover{background:#1d4ed8 !important;box-shadow:none !important;transform:none !important}
.alt-featured-price{color:var(--text)}
.alt-choose-btn{border:1px solid var(--blue) !important;background:#eff6ff !important;color:var(--blue) !important}
.alt-choose-btn:hover{background:var(--blue) !important;color:#fff !important;box-shadow:none !important;transform:none !important}

/* ---------- Modal ---------- */
.modal{background:rgba(15,23,42,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-box{
  background:var(--card);border:1px solid var(--border);box-shadow:var(--sh-lg);
}
.x{color:var(--muted)}
.x:hover{color:var(--text)}
.tabs{background:var(--bg2);border:1px solid var(--border)}
.tabs button{color:var(--muted)}
.tabs button.on{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.1)}
.err{color:#b91c1c}
.modal-logo .logo-num{color:var(--text)}
.modal-logo .logo-onay{color:var(--blue)}
#accBalance{color:var(--blue) !important}
#ticketChatClosedNotice{background:#fef2f2 !important;border-color:#fecaca !important;color:#b91c1c !important}
#topupModal span[style*="10b981"]{color:var(--ok) !important}

/* ---------- Bakiye yükleme ---------- */
.topup-switcher{background:var(--bg2);border:1px solid var(--border)}
.topup-tab-btn{color:var(--sub)}
.topup-tab-btn:hover{color:var(--text);background:rgba(15,23,42,.04)}
.topup-tab-btn.active{background:var(--card);color:var(--text);border-color:var(--border2);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.topup-tab-btn.tab-fast.active{background:var(--card);color:var(--text);border-color:var(--border2);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.card-preset-btn{background:var(--card);border:1px solid var(--border2);color:var(--text)}
.card-preset-btn:hover{border-color:var(--blue);background:#eff6ff;transform:none}
.card-preset-btn.active-preset{border-color:var(--blue);background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.card-preset-btn .badge-bonus{background:var(--ok);box-shadow:none}

/* ---------- Bonus, bildirim, toast, WhatsApp ---------- */
.bonus-banner{
  background:#fffbeb;border:1px solid #fde68a;color:#92400e;animation:none;
}
.bonus-banner b,.bonus-banner span{color:#b45309}
.bonus-banner:hover{border-color:#fbbf24;transform:none}
.purchase-notif{background:var(--card);border:1px solid var(--border);box-shadow:var(--sh-md)}
.pn-av,.rv-av{background:var(--blue)}
.toast{background:#0f172a;color:#fff;border:0;box-shadow:var(--sh-md)}
.wa-float{box-shadow:0 4px 14px rgba(37,211,102,.35)}
.wa-float::before{display:none}
.wa-tip{background:var(--card);color:var(--text);border:1px solid var(--border)}
.rv-card,.feed-item{background:var(--card);border:1px solid var(--border)}
.feed-time{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.stock-chip{background:#ecfdf5;border-color:#a7f3d0;color:#047857}

/* ---------- Alt bilgi ---------- */
.footer{background:var(--card);border-top:1px solid var(--border);padding:36px 0}
.footer-links a{color:var(--sub)}
.footer-links a:hover{color:var(--blue)}
.footer-trust-badges{border-color:var(--border) !important}
.footer-trust-badges > div{
  background:var(--card2) !important;border:1px solid var(--border) !important;
  color:var(--sub) !important;border-radius:8px !important;
}
.footer-trust-badges > div *{color:inherit !important}

/* ---------- Açılış ekranı (sade) ---------- */
.site-preloader{background:#fff}
.preloader-glow{display:none}
.pl-num{color:var(--text)}
.pl-onay{color:var(--blue)}
.preloader-bar{background:var(--border)}
.preloader-bar-fill{background:var(--blue)}
.preloader-text{color:var(--muted)}

/* ---------- Hareketleri azalt ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media(max-width:1000px){
  .hero{padding:28px 22px}
  .block{padding:24px 20px}
}

/* ==========================================================================
   MOBİL
   ========================================================================== */
@media(max-width:768px){
  .nav-inner{height:56px}
  .hero{padding:22px 16px}
  .hero h1{letter-spacing:-.5px}
  .block{padding:18px 14px}

  .nav-links{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--border)}
  .nav-links a{background:var(--card);border:1px solid var(--border);box-shadow:none;color:var(--text);font-weight:600}
  .nav-links a:hover,.nav-links a:active{background:var(--bg2);border-color:var(--border2)}

  .modal:not([hidden]){background:rgba(15,23,42,.5) !important}
  .modal-box{
    background:var(--card) !important;border:1px solid var(--border) !important;
    box-shadow:var(--sh-lg) !important;
  }

  body.user-logged-in .mobile-app-dock{
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(15,23,42,.06);
  }
  .dock-tab{color:var(--muted)}
  .dock-tab.active,.dock-tab.active .dock-label{color:var(--blue)}
  .dock-topup-btn{background:var(--blue);border:3px solid #fff;box-shadow:0 4px 12px rgba(37,99,235,.35)}
  .dock-badge{box-shadow:none}

  .my-num-card{background:var(--card);border:1px solid var(--border)}
  .my-num-card.is-waiting{background:#f8fafc;border-color:#bfdbfe}
  .my-num-card.is-done{background:#f8fafc;border-color:#a7f3d0}
  .my-num-body{background:var(--card2);border:1px solid var(--border)}
  .my-num-digits{color:var(--text)}
  .my-num-copy-badge{background:#eff6ff;color:var(--blue)}
  .my-num-waiting{color:#b45309}
  .my-num-code-display{background:#ecfdf5;border:1px solid #a7f3d0}
  .code-label,.code-copy-hint{color:#047857}
  .code-val{color:#047857}
  .my-num-status[style]{filter:none}
  .order .num{background:var(--bg2) !important}
}

/* ==========================================================================
   v2 — MODERN TEKNOLOJİ GÖRÜNÜMÜ + HIZ + UYGULAMA HİSSİ
   ========================================================================== */
:root{
  --accent:  #2563eb;
  --accent2: #06b6d4;
  --ink:     #0b1220;
  --r:       12px;
  --r-lg:    18px;
}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{
  letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,.btn,.item,.quick-svc-card,.filter-pill,.dock-tab{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Performans: ekran dışı bölümler görünene kadar çizilmez */
.block,.footer{content-visibility:auto;contain-intrinsic-size:auto 520px}
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
.modal{backdrop-filter:none;-webkit-backdrop-filter:none}
.preloader-bar-fill{animation-duration:.3s}

/* ---------- Logo ---------- */
.logo-num{color:var(--ink)}
.logo-onay{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.modal-logo .logo-onay,.footer .logo-onay{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pl-onay{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Butonlar ---------- */
.btn{transition:background .15s,transform .1s,box-shadow .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#0ea5e9);
  border:0;color:#fff;
  box-shadow:0 4px 14px -4px rgba(37,99,235,.5);
}
.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#0284c7);box-shadow:0 6px 18px -4px rgba(37,99,235,.55)}

/* ---------- HERO: koyu teknoloji paneli ---------- */
.hero{
  background:
    radial-gradient(600px 280px at 88% -10%,rgba(6,182,212,.28),transparent 70%),
    radial-gradient(520px 260px at -5% 110%,rgba(37,99,235,.35),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    var(--ink);
  border:1px solid #16213a;
  color:#e2e8f0;
  box-shadow:0 10px 30px -12px rgba(11,18,32,.45);
}
.hero-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#cbd5e1}
.hero-badge::before{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.hero h1{color:#fff;font-weight:800;letter-spacing:-1.2px}
.hero h1 span{
  background:linear-gradient(90deg,#60a5fa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent !important;
}
.hero p{color:#94a3b8}
.hero-bullets{color:#e2e8f0}
.hero-bullets span span{color:#22d3ee !important}
.hero [style*="uppercase"]{color:#94a3b8 !important}
.hero .quick-svc-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.hero .quick-svc-card:hover{
  background:rgba(255,255,255,.1);border-color:rgba(96,165,250,.6);box-shadow:none;transform:translateY(-1px);
}
.hero .quick-svc-card:active{transform:scale(.98)}
.hero .quick-svc-icon{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.hero .quick-svc-title{color:#fff}
.hero .quick-svc-desc{color:#94a3b8}

/* ---------- Rakamlar ---------- */
.stat-box{transition:border-color .15s,box-shadow .15s}
.stat-box:hover{border-color:#bfdbfe;box-shadow:var(--sh-md)}
.stat-box b{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Servis listesi ---------- */
.side{border-radius:var(--r-lg)}
.item{transition:background .12s}
.item:active{background:#e8efff}
.filter-pill.active{background:linear-gradient(135deg,var(--accent),#0ea5e9);border-color:transparent;color:#fff}
.step-badge{background:linear-gradient(135deg,var(--accent),#0ea5e9)}
.block-head .icon,.feat-item-icon{background:#eff6ff;border-color:#dbeafe}

/* ==========================================================================
   MOBİL: UYGULAMA GİBİ
   ========================================================================== */
.dock-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}

@media(max-width:768px){
  html,body{background:var(--bg)}
  body{font-size:14.5px;-webkit-user-select:none;user-select:none}
  input,textarea,.order .num,.code,.my-num-digits,.code-val,#userApiKeyInput,#topupIbanInput{-webkit-user-select:text;user-select:text}

  /* Üst bilgi şeridi: tek satır, kompakt */
  #liveStockBar{padding:5px 10px !important;font-size:11px !important}
  #liveStockBar > span:nth-child(n+3){display:none !important}

  /* Uygulama başlığı */
  .nav{box-shadow:0 1px 0 var(--border);padding-top:env(safe-area-inset-top,0)}
  .nav-inner{height:54px}
  .logo-num,.logo-onay{font-size:20px}
  #guestBox .btn{padding:7px 13px;font-size:12.5px;border-radius:9px}
  #topupBtn{padding:7px 11px;font-size:12px;border-radius:9px}
  .balance-chip{border-radius:9px;padding:6px 10px;font-size:12px}

  .layout{padding-top:12px;padding-bottom:24px;gap:14px}
  .side{padding:14px 12px;border-radius:16px}
  .list{max-height:56vh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .item{padding:10px 8px;border-radius:12px}
  .item .ic{width:38px;height:38px;border-radius:11px}
  .item .nm{font-size:14px}

  .hero{padding:22px 16px;border-radius:18px}
  .hero h1{font-size:25px;line-height:1.15}
  .hero p{font-size:13.5px}
  .quick-svc-grid{gap:8px}
  .quick-svc-card{padding:12px;border-radius:14px}
  .stats-strip{gap:8px}
  .stat-box{padding:14px;border-radius:14px}
  .stat-box b{font-size:22px}
  .block{padding:18px 14px;border-radius:16px;box-shadow:none}
  details{border-radius:12px}
  summary{padding:14px 14px;font-size:13.5px}

  /* Modal: uygulama penceresi */
  .modal:not([hidden]){background:rgba(11,18,32,.6) !important;padding:14px !important}
  .modal-box{border-radius:22px !important;box-shadow:0 24px 60px rgba(11,18,32,.35) !important}
  .modal-box::before{display:none !important}
  .search,.btn-block{min-height:46px}
  .modal .search{font-size:16px !important}   /* iOS yakınlaştırmayı engeller */

  /* Alt çubuk (yalnızca giriş yapmış kullanıcıda) */
  body.user-logged-in .mobile-app-dock{
    height:calc(64px + env(safe-area-inset-bottom,0px));
    padding:0 6px env(safe-area-inset-bottom,0px);
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgba(11,18,32,.06);
  }
  body.user-logged-in{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  .dock-tab{gap:3px;padding:8px 0 6px;color:#94a3b8;transition:color .15s}
  .dock-tab .dock-label{font-size:10.5px;font-weight:600}
  .dock-tab.active{color:var(--accent)}
  .dock-tab.active .dock-label{color:var(--accent)}
  .dock-tab:not(.dock-tab-primary).active::before{
    content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
  }
  .dock-tab-primary{top:-14px}
  .dock-topup-btn{
    width:52px;height:52px;border:4px solid #fff;
    background:linear-gradient(135deg,var(--accent),#0ea5e9);
    box-shadow:0 8px 18px -4px rgba(37,99,235,.55);
  }
  .dock-topup-btn .dock-icon svg{stroke:#fff;stroke-width:2.4;width:24px;height:24px}
  .dock-tab-primary .dock-label{color:var(--accent);margin-top:0}
  .dock-badge{top:5px;right:22%;background:#ef4444}

  /* Üstte kalan yüzen öğeler alt çubuğun üzerine çıksın */
  body.user-logged-in .wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.user-logged-in .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.user-logged-in .purchase-notif{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   v3 — GİRİŞ ANİMASYONU, MİSAFİR ÇUBUĞU, DEĞERLENDİRMELER, DURUM
   ========================================================================== */

/* ---------- Giriş animasyonu: yağan numaralar + SMS kodu ---------- */
.site-preloader{background:#0b1220 !important;overflow:hidden}
.no-intro .site-preloader{display:none !important}
@media (prefers-reduced-motion:reduce){.site-preloader{display:none !important}}

.intro-rain{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 14%,#000 70%);
          mask-image:radial-gradient(ellipse at center,transparent 14%,#000 70%);
}
.intro-col{
  position:absolute;top:0;display:flex;flex-direction:column;gap:12px;
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(96,165,250,.34);white-space:nowrap;
  animation:introFall linear infinite;will-change:transform;
}
.intro-col b{font-weight:600}
.intro-col b:nth-child(7n+3){color:rgba(34,211,238,.72)}
.intro-col b:nth-child(11n+5){color:rgba(255,255,255,.55)}
@keyframes introFall{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.intro-center{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:28px 34px;border-radius:24px;
  background:rgba(11,18,32,.86);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 70px 24px rgba(11,18,32,.92);
}
.site-preloader .intro-logo{
  font-size:44px;font-weight:800;letter-spacing:-1.2px;line-height:1;
  opacity:0;transform:translateY(8px) scale(.96);
  animation:introPop .35s .04s cubic-bezier(.2,.9,.3,1.15) forwards;
}
.site-preloader .pl-num{color:#fff}
.intro-sms{display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;animation:introFade .2s .15s forwards}
.intro-sms-label{font-size:10.5px;font-weight:700;letter-spacing:2.2px;color:#64748b}
.intro-code{display:flex;gap:8px}
.intro-code i{
  font-style:normal;width:36px;height:46px;display:grid;place-items:center;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  font:700 24px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  opacity:0;transform:translateY(8px) scale(.9);animation:introDigit .15s ease-out forwards;
}
.intro-code i:nth-child(1){animation-delay:.25s}
.intro-code i:nth-child(2){animation-delay:.31s}
.intro-code i:nth-child(3){animation-delay:.37s}
.intro-code i:nth-child(4){animation-delay:.43s}
.intro-code i:nth-child(5){animation-delay:.49s}
.intro-code i:nth-child(6){animation-delay:.55s}
.intro-status{position:relative;height:18px;min-width:190px;font-size:12.5px;font-weight:600;text-align:center}
.intro-wait,.intro-done{position:absolute;left:0;right:0;top:0;white-space:nowrap}
.intro-wait{color:#94a3b8;animation:introFadeOut .15s .62s forwards}
.intro-done{color:#34d399;opacity:0;animation:introFade .2s .64s forwards}

@keyframes introPop{to{opacity:1;transform:none}}
@keyframes introFade{to{opacity:1}}
@keyframes introFadeOut{to{opacity:0}}
@keyframes introDigit{to{opacity:1;transform:none}}
@media(max-width:480px){
  .intro-center{padding:22px 20px}
  .site-preloader .intro-logo{font-size:38px}
  .intro-code i{width:32px;height:42px;font-size:21px}
  .intro-code{gap:6px}
}

/* ---------- Canlı durum uyarı rengi ---------- */
#liveStockBar #sysStatus.sys-warn{color:#fbbf24 !important}

/* ---------- Başarı oranı çubuğu ---------- */
.rate-bar{display:block;height:3px;max-width:130px;margin-top:6px;border-radius:3px;background:var(--border);overflow:hidden}
.rate-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#10b981,#22d3ee)}
.rate-bar.mid i{background:linear-gradient(90deg,#f59e0b,#84cc16)}
.rate-bar.lo i{background:#f59e0b}

/* ---------- Müşteri değerlendirmeleri ---------- */
.block-head .reviews-summary{margin-left:auto;font-size:13px;color:var(--sub);white-space:nowrap}
.block-head .reviews-summary b{color:var(--text);font-size:15px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rv-card2{background:var(--card2);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.rv-top2{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rv-av2{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));flex-shrink:0}
.rv-name2{font-weight:700;font-size:13px;color:var(--text)}
.rv-stars2{color:#f59e0b;font-size:12px;letter-spacing:1px}
.rv-card2 p{color:var(--sub);font-size:13px;line-height:1.6;word-break:break-word}

.star-input{display:flex;justify-content:center;gap:6px}
.star-input button{border:0;background:none;font-size:34px;line-height:1;color:#cbd5e1;cursor:pointer;padding:2px 4px;transition:color .1s,transform .1s}
.star-input button.on{color:#f59e0b}
.star-input button:active{transform:scale(.88)}

/* ---------- Misafir çağrı çubuğu (yalnızca mobil, giriş yoksa) ---------- */
.guest-cta{display:none}
@media(max-width:768px){
  body.auth-ready:not(.user-logged-in) .guest-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9000;align-items:center;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.98);border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgba(11,18,32,.08);
  }
  .guest-cta-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .guest-cta-text b{font-size:14px;color:var(--text)}
  .guest-cta-text span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .guest-cta .btn{padding:10px 14px;font-size:13px;border-radius:10px;min-height:42px}
  body.auth-ready:not(.user-logged-in){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body.auth-ready:not(.user-logged-in) .wa-float,
  body.auth-ready:not(.user-logged-in) .toast,
  body.auth-ready:not(.user-logged-in) .purchase-notif{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Admin paneli: açık temaya uyum ---------- */
:root{--line:var(--border);--line2:var(--border2)}
.profit-val.c-green{color:#059669}
.profit-val.c-blue{color:#2563eb}
.profit-val.c-amber{color:#b45309}


/* ==========================================================================
   v3.3 — Çerez Bildirimi, Vaka Çalışmaları, Sticky CTA, Breadcrumbs
   ========================================================================== */

/* Breadcrumb / Sayfa İşaret Yolu */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb-trail a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-trail a:hover {
  text-decoration: underline;
}

/* Vaka Çalışmaları (Kullanım Senaryoları) */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.case-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.case-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--sh-md);
}
.case-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  align-self: flex-start;
}
.case-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.case-card p {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.6;
  margin: 0;
}
.case-benefit {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Çerez Bildirimi (KVKK & Cookie Consent Banner) */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 520px;
  margin: 0 auto;
  z-index: 9999999;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 16px 36px rgba(11, 18, 32, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-banner p {
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.55;
  margin: 0;
}
.cookie-banner a {
  color: var(--blue);
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-btn-accept {
  padding: 8px 18px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.cookie-btn-accept:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}
.cookie-btn-decline {
  padding: 8px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cookie-btn-decline:hover {
  color: var(--text);
  border-color: var(--border2);
}

/* Sticky Telefon / Canlı İşlem CTA Butonu */
.sticky-phone-cta {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sticky-phone-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
}
.sticky-phone-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
@media (max-width: 768px) {
  body.user-logged-in .sticky-phone-cta {
    bottom: calc(76px + env(safe-area-inset-bottom, 12px));
  }
  body:not(.user-logged-in) .sticky-phone-cta {
    bottom: calc(72px + env(safe-area-inset-bottom, 12px));
  }
  .cookie-banner {
    bottom: calc(76px + env(safe-area-inset-bottom, 12px));
    left: 12px;
    right: 12px;
    padding: 14px 16px;
  }
}


/* ---------- Dönen Kum Saati Animasyonu (Al Tuşunda Bekleme Göstergesi) ---------- */
@keyframes spinHourglass {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(180deg); }
  55% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.spin-hourglass {
  display: inline-block;
  animation: spinHourglass 1.1s infinite ease-in-out;
  transform-origin: center center;
  font-size: 13.5px;
  line-height: 1;
}
.buying-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  opacity: 0.9 !important;
  cursor: wait !important;
  min-width: 80px !important;
  pointer-events: none !important;
}