/* =========================
   MERGED & CLEANED CSS
   (Eksiksiz - Tek Dosya)
   ========================= */

/* -------------------------
   Variables (light + dark)
   ------------------------- */
:root{
  --bg:#ffffff;
  --surface:#fafbfc;
  --surface-2:#f2f4f7;
  --ink:#101418;
  --text:#111111; /* bazı bloklarda text kullanılıyor, bazıları ink -> ikisi korunur */
  --muted:#68707f;
  --accent:#0b0f19;
  --primary:#0d6efd;
  --primary-600:#0b5ed7;
  --success:#148a3d;
  --danger:#c0342b;
  --border:#e6e8ec;
  --shadow:0 12px 40px rgba(16,20,24,.06);
  --radius:14px;
  --radius-sm:10px;
  --focus:0 0 0 3px rgba(13,110,253,.25);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  /* Tipografi (mobil-öncelikli) */
  --fs-hero: clamp(1.4rem, 2.2vw + 1rem, 2.2rem);
  --fs-body: clamp(.95rem, .25vw + .9rem, 1.05rem);

  /* Card / UI */
  --card-bg:#f8f9fa;
  --list-bg:#ffffff;
  --thumb-bg:#e9ecef;
  --input-bg:#ffffff;
  --btn:#0d6efd;

  /* SJ highlights */
  --sj-new-bg: rgba(255,230,0,.45);
  --sj-accepted-bg: rgba(0,200,120,.30);
  --sj-new-glow: rgba(255,200,0,.65);
  

.list-group-item {
  background-color: #fff !important;
  color: #212529 !important;
  border-color: #e6e8ec !important;
}

}

/* Dark theme overrides */
html[data-theme="dark"],
html[data-bs-theme="dark"] {
  --bg:#0b0f19;
  --surface:#0f1524;
  --surface-2:#141b2b;
  --ink:#e7e9ee;
  --text:#ffffff;
  --muted:#a9b1c1;
  --accent:#e7e9ee;
  --primary:#4ea1ff;
  --primary-600:#2e86ff;
  --success:#3ddc84;
  --danger:#ff6b6b;
  --border:#1f2942;
  --shadow:0 12px 40px rgba(0,0,0,.35);

  --card-bg:#1c1c1c;
  --list-bg:#161616;
  --thumb-bg:#222222;
  --input-bg:#161616;
  --btn:#174ccf;

  --sj-new-bg: rgba(255,230,0,.25);
  --sj-accepted-bg: rgba(0,200,120,.20);
  --sj-new-glow: rgba(255,200,0,.45);
 
 
}
/* Dark */
html[data-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .list-group-item {
  background-color: #161616 !important;
  color: #e7e9ee !important;
  border-color: #1f2942 !important;
}
/* -------------------------
   Reset & Base
   ------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}

/* Safe-area adjustments */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sj-masthead{padding-top:env(safe-area-inset-top)}
.sj-footer-stick{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

/* -------------------------
   Container
   ------------------------- */
.sj-container{max-width:1100px;margin:0 auto;padding:0 16px}
@media (min-width:768px){ .sj-container{ padding-left: 32px; padding-right: 32px; } }

/* -------------------------
   Utils
   ------------------------- */
.sj-flex{display:flex}
.sj-align-center{align-items:center}
.sj-justify-between{justify-content:space-between}
.sj-wrap{flex-wrap:wrap}
.sj-center{text-align:center}
.sj-muted{color:var(--muted)}

/* -------------------------
   Masthead / Topbar / Brand
   ------------------------- */
.sj-masthead{border-bottom:1px solid var(--border);background:var(--bg)}
.sj-topbar {
  width: 100%;
  /* istersen çok hafif bir alt/üst çizgi gibi dursun */
  padding: 6px 0;
  background: var(--sj-topbar-bg, transparent);
}
.sj-topbar .sj-cid-badge {
  margin-left: 0; /* inline'daki margin-left:12px'i kaldır */
}

.sj-brand{display:flex;align-items:center;gap:12px;min-height:56px}
.sj-brand img{width:40px;height:40px;border-radius:10px}
.sj-brand-wordmark{
  font-family:var(--serif);
  letter-spacing:.14em;
  font-weight:700;
  font-size:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;
}
.sj-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sj-links{display:flex;gap:8px;flex-wrap:wrap}

.sj-icon-btn{
  width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--bg);cursor:pointer;color:var(--ink)
}
.sj-icon-btn:hover{background:var(--surface-2)}
.sj-chip{
  border:1px solid var(--border);
  border-radius:999px;padding:8px 12px;background:var(--surface);font-weight:600;font-size:14px
}

/* Mobile masthead tweaks */
@media (max-width:600px){
  .sj-tools{flex-direction:column;align-items:stretch}
  .sj-icon-btn{align-self:flex-end;order:1;width:36px;height:36px}
  .sj-links{order:2;width:100%;gap:6px}
  .sj-links .sj-chip{width:100%;text-align:center}
  .sj-brand-wordmark{max-width:100%}
}

/* -------------------------
   Nav / Marketbar
   ------------------------- */
.sj-nav{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sj-nav .sj-container{display:flex;gap:18px;overflow:auto;white-space:nowrap;padding:8px 16px}
.sj-nav a{padding:6px 0}
.sj-marketbar{border-bottom:1px solid var(--border);background:var(--surface)}
.sj-marketbar .sj-container{gap:18px;padding:8px 16px}
.sj-marketbar .up{color:var(--success)}
.sj-marketbar .down{color:var(--danger)}

/* -------------------------
   Hero
   ------------------------- */
.sj-hero{
  background:linear-gradient(180deg,var(--bg),var(--surface));
  border-bottom:1px solid var(--border)
}
.sj-hero-wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 0}
.sj-hero-col{flex:1}
.sj-h1{font-family:var(--serif);font-size:var(--fs-hero);margin:0 0 8px 0}
.sj-lead{color:var(--muted);margin:0}

.sj-hero .sj-lead{
  font-size:1.1rem;line-height:1.6;margin-bottom:1rem;color:var(--muted,#555);
  text-align:center;max-width:600px;margin-left:auto;margin-right:auto;
}
.sj-hero .sj-bullets{ list-style:none;padding:0;margin:1rem auto 0;max-width:600px; }
.sj-hero .sj-bullets li{
  margin-bottom:.5rem;padding-left:1.5rem;position:relative;font-size:1rem;line-height:1.4;text-align:left;
}
.sj-hero .sj-bullets li::before{ content:"✔"; position:absolute; left:0; color:var(--primary,#0d6efd); }

.sj-inline-form{ margin-top:16px }
.sj-inline-form .sj-input{ padding:12px 14px; border-radius:10px }
.sj-inline-form .sj-btn{ border-radius:10px; padding:12px 20px; margin-left:8px }

/* -------------------------
   Grid & Cards
   ------------------------- */
.sj-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:18px auto}
@media (min-width:900px){
  .sj-grid > .sj-card:last-child{ grid-column: 1 / -1; }
}
.sj-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.sj-span-2{grid-column:span 1}
@media(min-width:900px){ .sj-span-2{grid-column:span 2} }
.sj-kicker{font-family:var(--serif);font-size:18px;letter-spacing:.08em;margin:0 0 10px;color:var(--accent)}

/* Decorative kicker variant */
.sj-kicker{
  font-size:1rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--primary,#0d6efd);margin-bottom:0.75rem;border-left:4px solid var(--primary,#0d6efd);padding-left:0.5rem;
}
@media (max-width:640px){ .sj-kicker{ font-size:0.95rem; text-align:center } }

/* -------------------------
   Download card / Forms
   ------------------------- */
.sj-card--download{align-self:start}
.sj-card--download .sj-form{grid-template-columns:1fr}
@media(min-width:900px){ .sj-card--download .sj-actions{justify-content:flex-start} }

.sj-form{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media(min-width:680px){ .sj-form{grid-template-columns:1fr 1fr} }
.sj-field{display:flex;flex-direction:column;gap:6px}
.sj-field label{font-size:14px;color:var(--muted)}
.sj-input{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink)
}
.sj-input:focus{outline:none;box-shadow:var(--focus);border-color:var(--primary)}

/* -------------------------
   Buttons
   ------------------------- */
.sj-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);color:var(--ink);font-weight:700;cursor:pointer;
  transition:background .15s,transform .05s,border-color .15s;min-height:44px;
}
.sj-btn:hover{background:var(--surface-2)}
.sj-btn:active{transform:scale(.98)}
.sj-btn:focus{outline:none;box-shadow:var(--focus)}
.sj-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.sj-btn-primary:hover{background:var(--primary-600)}
.sj-btn{ margin: 0; }

/* Actions row */
.sj-actions{
  display:flex;justify-content:center;align-items:center;gap:.75rem;margin:.5rem 0 1rem;
}
.sj-actions span, .sj-actions strong{ font-size:.9rem;color:var(--muted,#68707f) }
@media (max-width:640px){ .sj-actions{ flex-direction:column; gap:.5rem; text-align:center; justify-content:center } }

/* -------------------------
   Lists / Sections / Warn
   ------------------------- */
.sj-list{list-style:none;margin:0;padding:0}
.sj-list li{padding:6px 0;border-top:1px solid var(--border)}
.sj-list li:first-child{border-top:0}
.sj-section{padding:18px 0}
.sj-section-head{display:flex;align-items:center;justify-content:space-between}
.sj-warn{display:none;color:var(--danger);font-weight:800}

/* -------------------------
   Tables (desktop + mobile)
   ------------------------- */
.sj-table-wrap{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;position:relative
}
.sj-table{width:100%;border-collapse:separate;border-spacing:0}
.sj-table thead th{
  background:var(--surface-2);text-align:center;padding:12px 8px;border-bottom:1px solid var(--border);font-size:12px;
  letter-spacing:.3px;text-transform:uppercase
}
.sj-table td{padding:14px 10px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.sj-table tbody tr:hover{background:color-mix(in oklab, var(--surface-2) 35%, transparent)}
.sj-cell-center{text-align:center}
.sj-table td a{ word-break: break-word; overflow-wrap:anywhere; }

/* Mobile scroller */
@media (max-width:768px){
  .sj-table-scroller{
    overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative;
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  }
  .sj-table{min-width:780px}
}

/* Desktop table layout */
@media (min-width:641px){
  .sj-table-wrap{ overflow-x: visible; }
  .sj-table{ table-layout: fixed; width:100%; min-width:0; }
  .sj-table th:nth-child(1), .sj-table td:nth-child(1){
    width:58%; text-align:left; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  }
  .sj-table th:nth-child(2), .sj-table td:nth-child(2){
    width:160px; text-align:center; white-space:nowrap;
  }
  .sj-table th:nth-child(3), .sj-table td:nth-child(3){
    width:260px; text-align:center;
  }
}

/* Mobile table adjustments */
@media (max-width:640px){
  .sj-table-wrap{
    position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent);
  }
  .sj-table-wrap::after{
    content: "→"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    font-size: 20px; color: var(--muted,#68707f); pointer-events: none; animation: sjSwipeHint 1.2s infinite;
  }
  @keyframes sjSwipeHint{
    0%,100%{ opacity:.25; transform: translateY(-50%) translateX(0) }
    50%   { opacity:1;  transform: translateY(-50%) translateX(4px) }
  }
  .sj-table{
    table-layout: fixed !important; width: auto !important; border-spacing: 0;
    min-width: calc((100vw - 32px) + 120px + 220px);
  }
  .sj-table th, .sj-table td{
    padding: 10px 8px; font-size: 14px; line-height: 1.45; text-align: left;
    white-space: normal; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; vertical-align: middle;
  }
  .sj-table th:nth-child(1), .sj-table td:nth-child(1){
    min-width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important;
  }
  .sj-table th:nth-child(2), .sj-table td:nth-child(2){
    min-width: 120px !important; max-width: 160px !important; text-align: center !important; white-space: nowrap !important;
  }
  .sj-table th:nth-child(3), .sj-table td:nth-child(3){ min-width: 220px !important; text-align: center !important; }
  .star-rating{ min-width: 0; gap: 6px; justify-content: center; }
  .star{ font-size: 22px; padding: 6px; }
  .rating-info{ font-size: 11px; }
}
@media (max-width:360px){
  .sj-table th, .sj-table td{ padding: 8px 6px; font-size: 13px }
  .sj-table th:nth-child(3), .sj-table td:nth-child(3){ min-width: 200px !important; }
}

/* -------------------------
   Star rating
   ------------------------- */
.star-rating{ display:flex; justify-content:center; align-items:center; gap:8px; touch-action:manipulation; }
.star{ font-size:22px; line-height:1; padding:6px; border-radius:8px; color:#c9d2e3; cursor:pointer; user-select:none; }
.star:active{ transform:scale(.94); }
.star.selected{ color:#ffb000; }
.rating-info{ margin-top:6px; color:var(--muted); font-size:12px; text-align:center; display:block; }

/* -------------------------
   Footer
   ------------------------- */
.sj-footer{border-top:1px solid var(--border);margin-top:28px;background:var(--bg);padding:14px 0}

/* -------------------------
   Video popup
   ------------------------- */
  /* -------------------------
       Video popup
       ------------------------- */
    .sj-video{
      position:fixed;
      bottom:20px;
      left:50%;
      transform:translateX(-50%) translateY(16px);
      width:92%;
      max-width:420px;
      aspect-ratio:16/9;
      background:#000;
      border-radius:12px;
      overflow:hidden;
      box-shadow:var(--shadow);
      z-index:900;
      opacity:0;
      visibility:hidden;
      transition:transform .25s, opacity .25s, visibility .25s;
    }
    .sj-video.open{
      opacity:1;
      visibility:visible;
      transform:translateX(-50%) translateY(0);
    }
    .sj-video .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:var(--ink);
      color:var(--bg);
      font-size:14px;
      padding:6px 10px;
    }
    .sj-video .close-btn{
      cursor:pointer;
      background:none;
      border:0;
      color:inherit;
      font-size:18px;
    }
    .sj-video .video-container iframe,
    .sj-video .video-container #yt-bg-player{
      width:100%;
      height:100%;
      border:0;
    }
    .sj-video-toggle{
      position:fixed;
      bottom:20px;
      left:50%;
      transform:translateX(-50%);
      width:48px;
      height:48px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--primary);
      color:#fff;
      box-shadow:var(--shadow);
      cursor:pointer;
      z-index:901;
      font-weight:800;
      border:0;
      font-size:20px;
    }
/* -------------------------
   Scroll-to-top
   ------------------------- */
.sj-scrolltop{
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--primary); color: #fff;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow);
  cursor:pointer; z-index: 1200;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background .15s, bottom .25s;
}
.sj-scrolltop:hover{ background: var(--primary-600); }
.sj-scrolltop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.sj-scrolltop.bump{ bottom: calc(18px + 88px + env(safe-area-inset-bottom)); }
.sj-scrolltop.avoid-footer{ bottom:88px; }
.sj-scrolltop.bump-cookie{ bottom:120px; }
.sj-scrolltop.bump-topbar{ bottom:80px; }
.sj-scrolltop:focus{ outline:none; box-shadow:var(--focus); }

/* -------------------------
   Quote
   ------------------------- */
.sj-quote{
  background: var(--surface-2, #f2f4f7); padding: clamp(20px,4vw,48px) 0;
  border-top:1px solid var(--border,#e6e8ec); border-bottom:1px solid var(--border,#e6e8ec);
}
.sj-quote-text{
  margin:0;font-family:var(--serif,Georgia,"Times New Roman",Times,serif);
  font-size:clamp(16px,2.1vw,20px);line-height:1.6;color:var(--ink,#101418);
}
.sj-quote-text footer{ margin-top:10px; font-size:.95em; color:var(--muted,#68707f); }
.sj-quote-sign{
  margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--muted,#68707f);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.9;
}

/* -------------------------
   Cookie / Consent
   ------------------------- */
.sj-consent-topbar{
  position:sticky;top:0;z-index:55;background:var(--surface-2,#f2f4f7);border-bottom:1px solid var(--border,#e6e8ec);
  padding:8px 0;font-size:14px;color:var(--ink,#101418)
}
.sj-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--bg,#fff);
  border-top:1px solid var(--border,#e6e8ec);box-shadow:0 -8px 30px rgba(16,20,24,.08)
}
.sj-cookie-inner{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.sj-cookie-text{margin:0;font-size:14px;line-height:1.5;color:var(--ink,#101418)}
.sj-cookie-actions{display:flex;gap:10px;flex-shrink:0}
.sj-cookie .sj-btn{padding:8px 12px;font-size:14px}
@media (max-width:640px){ .sj-cookie-inner{flex-direction:column;align-items:stretch} .sj-cookie-actions{justify-content:flex-end} }

/* -------------------------
   CID badge
   ------------------------- */
.sj-cid-badge{ font:12px/1.6 var(--sans,system-ui); color:var(--muted,#68707f) }
.sj-cid-badge code{ background:var(--surface-2,#f2f4f7); padding:2px 6px; border-radius:6px; border:1px solid var(--border,#e6e8ec) }

/* -------------------------
   SJ "new data" highlights
   ------------------------- */
@keyframes sjRowPulse{
  0%{ box-shadow:0 0 0 0 var(--sj-new-glow); }
  70%{ box-shadow:0 0 0 14px rgba(255,200,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,200,0,0); }
}
.sj-table tr.new-highlight{
  position:relative; z-index:1; background-color:var(--sj-new-bg) !important;
  animation:sjRowPulse 1s ease-out 3 both; cursor:pointer;
}
.sj-table tr.accepted{ background-color:var(--sj-accepted-bg) !important; transition:background-color .3s ease; }
.sj-table tbody tr.new-highlight:hover{ background-color:var(--sj-new-bg) !important; }
.sj-table tbody tr.accepted:hover{ background-color:var(--sj-accepted-bg) !important; }
@media (prefers-reduced-motion:reduce){ .sj-table tr.new-highlight{ animation:none; } }

/* -------------------------
   Alert / Page update
   ------------------------- */
.sj-alert{background:var(--surface-2,#f2f4f7);border-bottom:1px solid var(--border,#e6e8ec);color:var(--ink,#101418);padding:10px 0;font-size:14px}
.sj-alert u{ text-underline-offset:2px }
.sj-container.full-center{ display:flex; justify-content:center; align-items:center; min-height:5vh; }
.sj-page-update{
  display:inline-block;background:rgba(0,0,0,0.05);padding:10px 18px;border-radius:6px;
  font-size:1rem;font-weight:600;color:var(--sj-ink);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.08)
}

/* -------------------------
   Reject overlay
   ------------------------- */
.reject-overlay[hidden]{ display:none!important; }
.reject-overlay{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#fff5f5;color:#222;padding:20px;
}
.reject-box{ width:100%; max-width:480px; background:#fff; border:1px solid #f3b4b4; border-radius:20px; padding:24px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.reject-box h2{ margin:0 0 12px; font-size:1.4rem; color:#b00020; }
.reject-box p{ margin:0 0 18px; font-size:1rem; line-height:1.5; color:#444; }
.reject-actions{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.reject-actions .sj-btn{ border:none; border-radius:12px; padding:14px; font-size:1rem; font-weight:600; width:100%; cursor:pointer; transition:background .25s; }
.reject-actions .sj-btn-primary{ background:linear-gradient(135deg,#4caf50,#2e7d32); color:#fff; }
.reject-actions .sj-btn-primary:hover{ background:linear-gradient(135deg,#43a047,#1b5e20); }
.reject-actions .sj-btn{ background:#fbe9e7; color:#b00020; }
.reject-actions .sj-btn:hover{ background:#f9d5d0; }
.reject-note{ font-size:.8rem; color:#666; }
@media (max-width:600px){
  .reject-box{ padding:20px 16px; border-radius:16px; }
  .reject-box h2{ font-size:1.2rem; }
  .reject-box p{ font-size:.95rem; }
  .reject-actions .sj-btn, .reject-actions .sj-btn-primary{ font-size:.95rem; padding:12px; }
}
body.__blocked{ overflow: hidden !important; }

/* -------------------------
   Privacy notification modal
   ------------------------- */
.privacy-notification{
  position:fixed;inset:0;z-index:1000;background:color-mix(in srgb,#000 40%,transparent);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;min-height:100dvh;overflow:auto;
}
.privacy-notification.show{ display:grid; place-items:center; }
.notification-content{
  width:min(820px,92vw); max-height:min(85dvh,820px); margin:0; justify-self:center; align-self:center; overflow:auto;
  background:var(--bg,#fff); color:var(--ink,#101418); border:1px solid var(--border,#e6e8ec);
  box-shadow:0 24px 64px rgba(16,20,24,.25); border-radius:16px; padding:clamp(16px,3vw,28px);
}
@supports (display:grid){ .privacy-notification{ display:grid; place-items:center } }
@supports (height:100svh){ .privacy-notification{ min-height:100svh } }

/* -------------------------
   Accessibility sr-only
   ------------------------- */
.sj-sr-only{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* -------------------------
   SJ-DUO two-column container
   ------------------------- */
.sj-container.sj-duo{
  display:grid; grid-template-columns: 1fr; gap:18px; align-items:start;
}
@media (min-width:960px){ .sj-container.sj-duo{ grid-template-columns:1fr 1fr } }
.sj-container.sj-duo > *{ min-width:0 }
.sj-stack{ width:100% }
.sj-section-gap{ margin-top:18px; margin-bottom:18px }

/* -------------------------
   Terms modal
   ------------------------- */
.sj-terms{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:1000;
  align-items:center;justify-content:center;padding:16px;
}
.sj-terms-content{
  background:var(--bg);color:var(--ink);width:100%;max-width:780px;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);display:grid;grid-template-rows:auto 1fr auto;max-height:calc(100vh - 32px);
}
.sj-terms-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.sj-terms-header h3{margin:0;font-family:var(--serif);font-size:18px;letter-spacing:.02em}
.close-btn{border:0;background:transparent;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:6px;border-radius:8px}
.close-btn:hover{background:var(--surface-2)}
.sj-terms-body{padding:14px;overflow:auto;line-height:1.55}
.sj-terms-body a{color:var(--primary)}
.sj-terms-footer{padding:12px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
@media (max-width:540px){
  .sj-terms{padding:0}
  .sj-terms-content{height:100vh;width:100vw;max-width:none;max-height:none;border-radius:0;border:0;
    grid-template-rows:auto 1fr auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .sj-terms-header,.sj-terms-footer{padding-left:16px;padding-right:16px}
  .sj-terms-body{padding:12px 16px}
}

/* -------------------------
   Small-screen cosmetics
   ------------------------- */
@media (max-width:420px){
  .sj-tools{gap:6px}
  .sj-chip{padding:6px 10px;font-size:13px}
}

/* -------------------------
   Card form grid (card internal)
   ------------------------- */
.sj-card form{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;
}
.sj-card form label{grid-column:1 / -1;margin-bottom:4px}
#file_code,#file_password,#file_code_download,#file_password_download{ width:100% }
#progressContainer,#progressText,#downloadButton,#downloadFileName,#downloadFileNameDate{ grid-column:1 / -1 }
#uploadButton,#cancelButton{ grid-column:1 / -1 }
.sj-card{ width:100%; max-width:100%; border-radius: var(--radius) }
@media (max-width:768px){ .sj-card form{ grid-template-columns:1fr } }
#downloadForm{ margin-top:6px }

/* -------------------------
   FILE page alignments
   ------------------------- */
#uploadForm,#downloadForm{
  display:grid;grid-template-columns:1fr;gap:12px;align-items:end;
}
#uploadForm label,#downloadForm label{ grid-column:1 / -1; margin-bottom:4px; text-align:left }
#uploadForm input[type="file"],#uploadForm input[type="text"],#uploadForm input[type="password"],#downloadForm input[type="text"],#downloadForm input[type="password"]{
  width:100%; min-height:44px; border-radius:12px; border:1px solid var(--border, #e6e8ec); padding:10px 12px;
}
#uploadButton,#cancelButton,#progressContainer,#progressText,#downloadButton,#downloadFileName,#downloadFileNameDate{ grid-column:1 / -1 }
#uploadButton,#cancelButton{ justify-self:start }
#downloadButton{ display:flex; justify-content:flex-start }
#downloadForm,#uploadForm{ width:100% }
@media (max-width:768px){ #uploadForm,#downloadForm{ grid-template-columns:1fr } }

/* -------------------------
   Global containers fix
   ------------------------- */
.container, .table-wrapper, .table-container { max-width: 100% !important; }

/* -------------------------
   Newsletter card
   ------------------------- */
.sj-card.newsletter{
  width:100%; max-width:900px; margin:0 auto;
}
.sj-card.newsletter .sj-kicker{ text-align:center; margin-bottom:12px }
.sj-card.newsletter .sj-form{ display:grid; grid-template-columns:1fr; gap:12px; justify-items:stretch }
@media (min-width:768px){
  .sj-card.newsletter .sj-form{ grid-template-columns:1fr 1fr auto; column-gap:12px; justify-content:center; align-items:end }
  .sj-card.newsletter .sj-btn{ justify-self:center }
  .sj-card.newsletter .sj-field{ min-width:260px }
}

/* star rating compact */
.star-rating{ display:inline-flex; gap:4px; user-select:none }
.star{ cursor:pointer; font-size:18px; line-height:1 }
.star.selected{ color:#d4a017 }
.star.disabled{ cursor:default; opacity:.5 }

/* hide privacy/reject when hidden */
#privacy-notification[hidden],#reject-blocker[hidden]{display:none!important;pointer-events:none!important;visibility:hidden!important}

/* -------------------------
   Card & status colors
   ------------------------- */
.sj-card{
  width:100%;max-width:1100px;margin:0 auto;display:block;padding:16px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);border:1px solid var(--border);background:var(--surface);
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.status-ok{ color:var(--success); font-weight:600; transition: color .3s }
.status-bad{ color:var(--danger); font-weight:600; transition: color .3s }

/* -------------------------
   Table base
   ------------------------- */
table{
  width:100%; border-collapse:collapse; margin-top:10px; color:var(--ink); transition: color .3s, border-color .3s, background .3s;
}
th,td{
  padding:8px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; transition: background .3s, color .3s, border-color .3s;
}
th{ background:var(--surface-2) }

/* small text */
.small{ font-size:12px; color:var(--muted); transition: color .3s }

/* dark-mode specific adjustments */
html[data-theme="dark"] .sj-card{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow) }
html[data-theme="dark"] table{ color:var(--ink) }
html[data-theme="dark"] th{ background:var(--surface-2) }
html[data-theme="dark"] .status-ok{ color:var(--success) }
html[data-theme="dark"] .status-bad{ color:var(--danger) }
html[data-theme="dark"] .small{ color:var(--muted) }

/* -------------------------
   Chart / legend / canvas helpers
   ------------------------- */
.card{ background:#fff; padding:15px; margin-bottom:20px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); overflow: visible; }
.chart-wrap{ position:relative; width:100%; height:340px; overflow: visible; }
@media (max-width:768px){ .chart-wrap{ height:200px } }
.chart-wrap > canvas#chart, .chart-wrap canvas#chart{ width:100% !important; height:100% !important; display:block; box-sizing:border-box; }
@media (max-width:480px){ .card{ padding-bottom:12px !important } }
.card, .sj-card, .chart-wrap{ overflow: visible !important; }
@media (max-width:480px){
  .chart-wrap .chartjs-legend, .chart-legend, .chart-legend *{ font-size:11px !important; line-height:1 !important; }
}

/* -------------------------
   QR section
   ------------------------- */
#qrSection .sj-flex{ align-items:flex-start; gap:1.5rem }
.qr-img{ width:100%; max-width:220px; height:auto; border:1px solid var(--border,#ddd); border-radius:8px; background:#fff; }
.qr-side{ flex:1; min-width:200px }
.qr-side .sj-actions{ margin-top:.75rem; flex-wrap:wrap; gap:.5rem; justify-content:flex-start }
@media (max-width:576px){
  #qrSection .sj-flex{ flex-direction:column; align-items:center; text-align:center }
  .qr-side{ margin-top:1rem }
}

/* responsive QR variant */
.qr-img{ max-width:320px; aspect-ratio:1/1 }

/* QR button spacing */
#qrSection .btn{ margin-right:.5rem }
#qrSection .btn:last-child{ margin-right:0 }
#qrSection .d-flex.flex-wrap{ margin-top:1rem }

/* -------------------------
   Dropzone (single, unified)
   ------------------------- */
.dropzone{
  border-radius:14px; padding:26px; border:1px dashed color-mix(in srgb,var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; margin-left:auto; margin-right:auto;
  max-width:500px; width:100%; text-align:center;
 cursor: pointer; /* imleç tıklama ikonuna dönüşsün */

}
.dropzone.drag-over{
  border-color:var(--btn); background: color-mix(in srgb, var(--btn) 8%, var(--card-bg));
}
#dropzone .mb-2,#dropzone .badge,#dropzone .hint,#dzFiles{ text-align:center; width:100% }
.dz-hidden-input{ display:none !important; }
.dz-files{ margin-top:.5rem; font-size:.9rem; color:var(--muted); word-break:break-word }

/* -------------------------
   iLovePDF-like topbar / ILP skin
   ------------------------- */
:root { --accent:#0d6efd; } /* ensure accent set (keeps consistent) */
.topbar.ilp{ background:var(--card-bg); border-bottom:1px solid var(--border); margin-bottom:1rem; box-shadow:0 4px 12px rgba(0,0,0,.04) }
.ilp-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem 1rem; padding-block:.6rem }
.ilp-badge{ display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.5px; box-shadow:0 3px 8px rgba(13,110,253,.35) }
.ilp-title{ font-weight:600; color:var(--text); white-space:nowrap }
.ilp-nav{ justify-self:center; display:flex; gap:1rem; flex-wrap:wrap }
.ilp-link{ position:relative; text-decoration:none; color:var(--text); font-size:.95rem; padding:.35rem .1rem; transition:color .2s }
.ilp-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease }
.ilp-link:hover::after{ transform:scaleX(1) }
.ilp-link.ilp-active{ font-weight:600 }
.ilp-link.ilp-active::after{ transform:scaleX(1) }

.ilp-theme{
  justify-self:end; border:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  background: color-mix(in srgb,var(--card-bg) 80%, transparent); color:var(--text); border-radius:10px; padding:.45rem .65rem; line-height:1; transition:box-shadow .15s, transform .12s, border-color .15s;
}
.ilp-theme:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); border-color:var(--accent) }

@media (max-width:576px){
  .ilp-grid{ grid-template-columns:1fr auto; grid-template-areas:"brand theme" "nav nav" }
  .ilp-brand{ display:flex; align-items:center; gap:.25rem }
  .ilp-nav{ grid-area:nav; justify-content:center; margin-top:.25rem; gap:.75rem }
  .ilp-theme{ grid-area:theme }
}

/* topbar brand / badge variant adjustments */
.topbar .ilp-brand{ display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--text) }
.topbar .ilp-brand *{ text-decoration:none !important }
.ilp-badge{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.3px; box-shadow:0 3px 10px rgba(13,110,253,.28) }
.ilp-title{ font-weight:600; font-size:1rem; line-height:1; white-space:nowrap }

/* -------------------------
   Page title scaling
   ------------------------- */
.page-title{
  font-size: clamp(1.05rem, 1rem + 1.2vw, 1.5rem);
  line-height:1.2; margin-bottom:.75rem; display:inline-flex; align-items:center; gap:.5rem;
  text-wrap:balance;
}
.page-title .icon{ font-size:1.1em; line-height:1 }
@media (max-width:360px){ .page-title{ font-size: clamp(.98rem, 3.6vw + .5rem, 1.25rem) } }

/* -------------------------
   Corporate skin & tweaks
   ------------------------- */
body{ font-feature-settings:"liga" 1, "kern" 1 }
.container-narrow{ max-width:880px }

.page-title{ font-size:clamp(1.02rem,0.9rem+1.1vw,1.45rem); font-weight:650; line-height:1.25; margin-bottom:.9rem; letter-spacing:.2px }

.card-elev{
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.04);
}

/* input styles for corporate */
.form-control, .form-select{ border-radius:10px; border-color: color-mix(in srgb, var(--border) 85%, transparent) }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--btn) 42%, var(--border));
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--btn) 18%, transparent); outline:0;
}
.form-label{ font-weight:600; font-size:.92rem }

/* corporate buttons */
.btn{ border-radius:10px; font-weight:600; letter-spacing:.2px }
.btn-primary{ background:var(--btn); border-color:var(--btn); box-shadow:0 8px 20px rgba(13,110,253,.18) }
.btn-primary:hover{ filter:brightness(1.02) }
.btn-outline-primary{ border-color:var(--btn) }
.btn-outline-secondary{ border-color: color-mix(in srgb, var(--border) 80%, transparent) }

/* ghost */
.btn-ghost{
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-bg) 80%, transparent); color:var(--text)
}
.btn-ghost:hover{ border-color:var(--btn); box-shadow:0 4px 12px rgba(0,0,0,.08) }

/* -------------------------
   Additional dropzone corporate
   ------------------------- */
/* (merged with main dropzone above) */

/* -------------------------
   QR / Table / Misc layout adjustments
   ------------------------- */
#qrSection .btn{ min-width:110px }
#qrSection .d-flex.flex-wrap{ margin-top:.5rem }
.list-group-item{ border-radius:10px; margin-bottom:.5rem }

/* QR side width control */
.qr-side{ max-width:520px }
@media (min-width:768px){ .qr-side{ margin-left:2rem } }

.qr-url{ word-break:break-word; overflow-wrap:anywhere }

/* actions gap */
#qrSection .actions{ gap:.5rem }

/* soft ghost button */
.btn-ghost{ border:1px solid color-mix(in srgb,var(--border) 85%,transparent); background: color-mix(in srgb,var(--card-bg) 88%,transparent); color:var(--text) }
.btn-ghost:hover{ border-color:var(--btn); box-shadow:0 4px 12px rgba(0,0,0,.08) }

/* -------------------------
   Utility final touches
   ------------------------- */
#privacy-notification[hidden], #reject-blocker[hidden]{ display:none!important; pointer-events:none!important; visibility:hidden!important }

/* ensure dropzone & corporate spacing stable across small sizes */
@media (max-width:576px){
  .ilp-nav{ justify-content:center; margin-top:.25rem; gap:.75rem }
  .qr-img{ max-width:320px; aspect-ratio:1/1 }
}

/* End of merged CSS */

 
/* --- 2.css uyumlu minimalist corporate tema --- */
 

 

/* ==============================
   FTP /index.php Özel Stil Bloğu
   (Sadece <body data-page="ftp"> için geçerli)
   ============================== */

/* Error */
body[data-page="ftp"] .error{
  background:color-mix(in srgb,var(--danger) 10%,var(--surface));
  color:var(--danger);
  padding:.75rem;
  border-radius:10px;
  text-align:center;
  margin-bottom:1rem;
  font-weight:600;
}

/* Table */
body[data-page="ftp"] table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  color:var(--ink);
  border-radius:10px;
  overflow:hidden;
}

body[data-page="ftp"] th,
body[data-page="ftp"] td{
  border:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
}

body[data-page="ftp"] th{
  background:var(--surface-2);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.8rem;
}

body[data-page="ftp"] th[data-field] {
  cursor:pointer;
  user-select:none;
  transition:background .15s;
}

body[data-page="ftp"] th[data-field]:hover {
  background:color-mix(in srgb, var(--surface-2) 70%, transparent);
}

body[data-page="ftp"] tbody tr:hover{
  background:color-mix(in srgb,var(--surface-2) 40%,transparent);
}

/* Buttons */
body[data-page="ftp"] .download-btn{
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  background:var(--btn);
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

body[data-page="ftp"] .download-btn:hover{
  background:var(--primary-600);
}

/* Pagination */
body[data-page="ftp"] .pagination{
  text-align:center;
  margin-top:1.25rem;
}

body[data-page="ftp"] .pagination a{
  display:inline-block;
  margin:3px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-weight:500;
  text-decoration:none;
  transition:all .2s;
}

body[data-page="ftp"] .pagination a:hover{
  border-color:var(--btn);
  color:var(--btn);
}

body[data-page="ftp"] .pagination a.active{
  background:var(--btn);
  color:#fff;
}

/* Controls */
body[data-page="ftp"] .controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:15px;
}

body[data-page="ftp"] .controls-left{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
}

body[data-page="ftp"] .controls input[type=text]{
  flex:1;
  min-width:180px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
}

body[data-page="ftp"] .controls select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
}

body[data-page="ftp"] .controls button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--btn);
  background:var(--btn);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

body[data-page="ftp"] .controls button:hover{
  background:var(--primary-600);
}

/* Login form */
body[data-page="ftp"] #loginForm{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:340px;
  margin:0 auto;
}

body[data-page="ftp"] #loginForm input{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
}

body[data-page="ftp"] #loginForm button{
  padding:12px 14px;
  border:1px solid var(--btn);
  border-radius:10px;
  background:var(--btn);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

body[data-page="ftp"] #loginForm button:hover{
  background:var(--primary-600);
}

body[data-page="ftp"] label{
  font-weight:600;
  color:var(--muted);
  font-size:.9rem;
}

/* Responsive table */
@media(max-width:640px){
  body[data-page="ftp"] table,
  body[data-page="ftp"] thead,
  body[data-page="ftp"] tbody,
  body[data-page="ftp"] th,
  body[data-page="ftp"] td,
  body[data-page="ftp"] tr{display:block;}

  body[data-page="ftp"] thead{display:none;}

  body[data-page="ftp"] tr{
    background:var(--surface);
    margin-bottom:10px;
    border:1px solid var(--border);
    border-radius:10px;
  }

  body[data-page="ftp"] td{
    display:flex;
    justify-content:space-between;
    padding:10px;
    border:none;
    border-bottom:1px solid var(--border);
  }

  body[data-page="ftp"] td::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--muted);
  }

  body[data-page="ftp"] td:last-child{border-bottom:none;}
}