:root{
  --blue:#2563eb;
  --blue2:#1d4ed8;

  --text:#0f172a;
  --muted:#64748b;   /* hangisini istiyorsan bunu sabitle */

  --navy:#0b1220;
  --cream:#ffffff;
  --page:#f6f7f9;

  --bg:#f3f6fb;
  --card:#ffffff;

  --line:#e5e7eb;    /* hangisini istiyorsan bunu sabitle */
  --soft:#f8fbff;

  --cyan:#22d3ee;
  --green:#22c55e;
  --yellow:#f59e0b;
}


/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* =========================
   MARQUEE BAR
========================= */
.marquee-bar{
  background:linear-gradient(180deg, #0b1220 0%, #0a1426 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.marquee-title{
  font-weight:900;
  color:#ff9f1c;
  letter-spacing:.2px;
  white-space:nowrap;
}
.marquee-track-wrap{flex:1; overflow:hidden;}
.marquee-track{display:flex; gap:18px; align-items:center; white-space:nowrap;}
.marquee-strip{
  display:inline-flex;
  gap:18px;
  align-items:center;
  padding-right:18px;
  animation:marq 18s linear infinite;
}
@keyframes marq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{display:inline-flex; align-items:center; gap:10px; font-weight:700; opacity:.95;}
.marquee-item .site{color:#e5e7eb}
.marquee-item .old{
  color:#ef4444;
  font-weight:900;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(239,68,68,.14);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:#ef4444;
}

.marquee-item .new{
  color:#22c55e;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
}

.marquee-btn{
  background:#ffffff;
  color:#0b1220;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.marquee-btn:hover{filter:brightness(.98)}

/* Üzerine gelince durdur */
.marquee-track-wrap:hover .marquee-strip {
  animation-play-state: paused;
}

.marquee-item{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}


/* =========================
   HEADER
========================= */
.header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.header-inner{
  width:100%;
  max-width:none;           /* 🔥 kilidi kaldır */
  margin:0;
  padding:16px 32px;        /* kenarlardan nefes */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}



/* ==========================
   FIX: Katman (z-index) çakışmaları
========================== */
.header{ position: relative; z-index: 1500; overflow: visible !important; }
.mobile-overlay{ z-index: 2000 !important; }
.mobile-drawer{ z-index: 2100 !important; }

/* ==========================
   HEADER GENEL: ORTALAMA (arka plan ekleme YOK)
   - İçeriği ortalar: max-width + margin auto
   - Büyük ekranda gereksiz kaydırmayı engellemek için max-width yükseltilir
========================== */
.header .header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap: nowrap !important;
  overflow: visible !important;

  width: 100%;
  max-width: 1400px;      /* ✅ varsayılan */
  margin: 0 auto;
  padding: 0 14px;
}
@media (min-width: 1400px){
  .header .header-inner{ max-width: 1680px; } /* ✅ büyük ekran: daha geniş */
}
@media (min-width: 1800px){
  .header .header-inner{ max-width: 1760px; } /* ✅ ultra geniş: biraz daha */
}

/* Brand sabit */
.header .brand{ flex:0 0 auto; }

/* ==========================
   DESKTOP NAV:
   - Sığarsa: ortalı (justify:center), scroll yok
   - Taşarsa: scroll var (overflow-x:auto) + soldan başlar
========================== */
.header nav#headerActions.desktop-nav{
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;

  /* ✅ sadece taşarsa scroll görünür/çalışır */
  overflow-x: auto !important;
  overflow-y: hidden !important;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;

  touch-action: pan-x;
  overscroll-behavior-x: contain;

  position: relative; /* gradient için */
  padding-bottom: 2px;

  /* ✅ sığarsa ortalı */
  justify-content: center !important;
}
.header nav#headerActions.desktop-nav::-webkit-scrollbar{ display:none; }

/* ✅ taşma varsa JS bunu ekler -> soldan başlat */
.header nav#headerActions.desktop-nav.is-scrollable{
  justify-content: flex-start !important;
}

/* İçindeki HER şey sıkışmasın -> taşma oluşsun (sığmıyorsa) */
.header nav#headerActions.desktop-nav > a,
.header nav#headerActions.desktop-nav > div,
.header nav#headerActions.desktop-nav > button,
.header nav#headerActions.desktop-nav > *{
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Daralınca textleri gizle */
@media (max-width: 1080px){
  .header nav#headerActions.desktop-nav .hbtn .txt{ display:none !important; }
  .header nav#headerActions.desktop-nav .hbtn{ padding:10px 10px !important; }
}

/* Dropdown menü sağa taşarsa kesilmesin */
#catDrop{ position:relative; }
#catDrop .dropdown-menu{
  right:0;
  left:auto;
  max-width:min(360px, 90vw);
}

/* ==========================
   GRADIENT İPUCU
   - JS: has-left/has-right class ekler (sadece taşma varsa)
========================== */
.header nav#headerActions.desktop-nav::before,
.header nav#headerActions.desktop-nav::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:28px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  z-index: 5;
}
.header nav#headerActions.desktop-nav::before{
  left:0;
  background: linear-gradient(90deg,
    var(--hx-bg, rgba(255,255,255,1)) 0%,
    rgba(255,255,255,0) 100%
  );
}
.header nav#headerActions.desktop-nav::after{
  right:0;
  background: linear-gradient(270deg,
    var(--hx-bg, rgba(255,255,255,1)) 0%,
    rgba(255,255,255,0) 100%
  );
}
.header nav#headerActions.desktop-nav.has-left::before{ opacity:1; }
.header nav#headerActions.desktop-nav.has-right::after{ opacity:1; }

/* ✅ sürükleme imleci sadece taşma varsa */
@media (hover:hover){
  .header nav#headerActions.desktop-nav.is-scrollable{ cursor: grab; }
  .header nav#headerActions.desktop-nav.is-scrollable:active{ cursor: grabbing; }
}

/* ==========================
   AKTİF MENÜ VURGUSU (arka plan YOK)
========================== */
.header .desktop-nav .hbtn.is-active,
.header .desktop-nav #catDrop > button.is-active{
  border-color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(17,24,39,.20) !important;
}
.header .desktop-nav .hbtn.is-active .txt,
.header .desktop-nav #catDrop > button.is-active .txt{
  color: #111827 !important;
  font-weight: 700 !important;
}

/* Mobile drawer aktif link */
.mobile-drawer .menu-item.is-active{
  border: 1px solid rgba(17,24,39,.25) !important;
}

/* ==========================
   MOBİL DRAWER – TEK HİZA SİSTEMİ
   + KATEGORİLER VURGUSU (farklı renk)
========================== */
@media (max-width: 980px){

  .mobile-drawer nav.header-actions .menu-item,
  .mobile-drawer nav.header-actions .menu-acc-toggle{
    width: 100%;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 14px 12px !important;
    margin: 0 !important;
    border-radius: 14px;
    box-sizing: border-box;
    background: transparent;
    border: 0;
  }

  .mobile-drawer nav.header-actions .mi-ico{
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px;
    background: rgba(15,23,42,.06);
    font-size: 18px;
  }

  .mobile-drawer nav.header-actions .mi-txt,
  .mobile-drawer nav.header-actions .mi-txt-wrap{
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-drawer nav.header-actions .mi-arrow{
    flex: 0 0 auto;
    margin-left: auto !important;
    opacity: .8;
  }

  #mobCatToggle{
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(90deg, rgba(99,102,241,.12), rgba(99,102,241,.04)) !important;
    border-left: 4px solid #6366f1 !important;
  }

  #mobCatToggle .mi-ico{
    background: rgba(99,102,241,.18) !important;
    color: #4338ca;
  }

  #mobCatToggle .mi-title{
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: #1e1b4b;
  }

  #mobCatToggle .mi-sub{
    font-size: 12px;
    opacity: .88;
    line-height: 1.2;
    color: #4f46e5;
  }

  #mobCatToggle .mi-arrow{
    opacity: 1;
    color: #4338ca;
  }

  #mobCatToggle[aria-expanded="true"]{
    background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(99,102,241,.06)) !important;
  }

  #mobCatPanel{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  #mobCatPanel .menu-item.menu-subitem{
    margin: 0 !important;
    width: 100% !important;
    padding: 12px 12px !important;
    border-radius: 14px !important;
    background: rgba(15,23,42,.03) !important;
  }

  #mobCatPanel .menu-item.menu-subitem .mi-arrow{ display: none !important; }
  #mobCatPanel[hidden]{ display: none !important; }

  .mi-chevron{ transition: transform .18s ease; }
  .menu-acc-toggle[aria-expanded="true"] .mi-chevron{ transform: rotate(180deg); }
}

/* Mobilde marquee çakışma önlemi */
@media (max-width: 768px){
  .marquee-bar{ position: sticky; top: 0; z-index: 1400; }
}

/* Drawer açıkken scroll kilidi */
.no-scroll{ overflow: hidden !important; }

/* Yatay taşma emniyeti */
html, body{ overflow-x: hidden; }
.mobile-drawer{ width: 86vw; max-width: 420px; }

/* Mobile kırılımı sizde 980px */
@media (max-width: 980px){
  .header nav#headerActions.desktop-nav{ display:none !important; }
  .mobile-menu-btn{ display:inline-flex; }
}
@media (min-width: 981px){
  .mobile-menu-btn{ display:none !important; }
}


/* ==========================
   SOFT HEADER (desktop nav butonları + üst boşluk)
   - Arka plan ekleme yok (mevcut görünümü yumuşatır)
========================== */

/* Üstteki boşluğu azıcık kıs */
.header{ padding-top: 6px !important; }
.header .header-inner{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Menünün genel aralığını biraz yumuşat */
.header nav#headerActions.desktop-nav{
  gap: 8px !important;
  padding-bottom: 0 !important;
}

/* Butonları soft yap (kaba border/shadow azalt) */
.header nav#headerActions.desktop-nav .hbtn,
.header nav#headerActions.desktop-nav #catDrop > button{
  border-width: 1px !important;
  border-color: rgba(17,24,39,.10) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.04) !important;

  border-radius: 16px !important;      /* daha yumuşak */
  padding: 10px 14px !important;       /* biraz daha ince */
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Hover: çok kaba olmasın */
@media (hover:hover){
  .header nav#headerActions.desktop-nav .hbtn:hover,
  .header nav#headerActions.desktop-nav #catDrop > button:hover{
    border-color: rgba(17,24,39,.16) !important;
    box-shadow: 0 3px 10px rgba(17,24,39,.06) !important;
    transform: translateY(-1px);
  }
}

/* Emoji ikon “chip” alanı varsa yumuşat (kaba yuvarlak hissini azaltır) */
.header nav#headerActions.desktop-nav .hbtn .ico{
  opacity: .92;
  filter: saturate(.95);
}

/* AKTİF MENÜ: arka plan yok, sadece daha net ama soft çerçeve */
.header .desktop-nav .hbtn.is-active,
.header .desktop-nav #catDrop > button.is-active{
  border-color: rgba(17,24,39,.32) !important;
  box-shadow: 0 0 0 1px rgba(17,24,39,.10) !important;
}







.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
}
.brand-badge{
  width:38px; height:38px;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
}
.brand-title{
  font-size:26px;
  font-weight:900;
  line-height:1;
  color:#1d4ed8; /* hedefe yakın mavi */
}

/* actions */
.header-actions{display:flex; align-items:center; gap:12px;}
.hbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  text-decoration:none;
  color:var(--text);
  font-weight:900;
}
.hbtn .ico{
  width:34px; height:34px;
  border-radius:10px;
  background:#e8efff;
  display:grid;
  place-items:center;
  font-size:16px;
}
.hbtn:hover{background:#eef2ff}
.hbtn .badge{
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* SECTION WRAP (ortalama) STORY */
.svc-section{
  padding:18px 0;
}
.svc-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 14px;
}

/* Header */
.svc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.svc-title{
  font-weight:800;
  font-size:18px;
  line-height:1.2;
}
.svc-subtitle{
  color:rgba(0,0,0,.60);
  font-size:13px;
  margin-top:2px;
}

/* Button (modern) */
.svc-btn{
  flex:0 0 auto;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
}
.svc-btn:hover{
  border-color:rgba(0,0,0,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Card */
.svc-card{
	
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 10px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  backdrop-filter:saturate(140%) blur(6px);
}

/* =========================================================
   STORY STRIP (YATAY KAYDIRMALI + scrollbar görünmez)
   - Desktop: ekranda aynı anda 12 item görünsün
   - Fazlası: kaydırarak
========================================================= */

/* Story strip */
.story-strip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;  /* ✅ center yerine flex-start */
  gap: 16px;  /* ✅ 18px'den 16px'e düşürdüm - daha rahat sığar */
  padding: 6px 8px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.story-strip::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

@media (min-width: 992px){
  .story-strip{ 
    padding-left: 12px;   /* ✅ padding azaltıldı */
    padding-right: 12px; 
  }
}

/* =========================================================
   ITEM
   Desktop'ta: container genişliğine göre 12 adet sığacak şekilde hesap
   calc( (100% - (11*gap)) / 12 )
========================================================= */
/* Story öğelerinin içindeki metin ve ikonları ortalamak için */
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  flex-shrink: 0;  /* ✅ ÇOK ÖNEMLİ: Sıkışmayı engeller */
  
  /* Mobil */
  width: 78px;
  min-width: 78px;
}

/* Desktop: 12 eleman sığdırmak için */
@media (min-width: 992px){
  .story-item{
    width: 80px;      /* ✅ Sabit genişlik - daha güvenli */
    min-width: 80px;
  }
}

/* Daha geniş ekranlarda biraz daha geniş olabilir */
@media (min-width: 1400px){
  .story-item{
    width: 90px;
    min-width: 90px;
  }
}

.story-item:hover .story-ring{ 
  transform:translateY(-2px) scale(1.05);  /* ✅ Hover efekti geliştirildi */
}

/* =========================================================
   RING
========================================================= */
.story-ring{
  --c1:#ff2bd6;
  --c2:#ff8a00;
  --c3:#ffd000;

  display:inline-flex;
  width:64px;   /* ✅ 70px'den 64px'e - biraz küçülttüm */
  height:64px;
  padding:3px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1));
  transition:.2s ease;
  animation:ringSpin 3s linear infinite;
  will-change: transform;
}

@keyframes ringSpin{ 
  to { transform: rotate(360deg); } 
}

.story-item:hover .story-ring{
  animation-duration:1.4s;
}

/* =========================================================
   AVATAR
========================================================= */
.story-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f8f9fa;  /* ✅ Daha yumuşak bg */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:3px solid #fff;
  box-sizing: border-box;  /* ✅ Border hesabı */
}

.story-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.story-initials{
  color:#333;
  font-weight:900;
  font-size: 18px;
  letter-spacing:.5px;
}

/* =========================================================
   TEXTS
========================================================= */
.story-label{
  display:block;
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:#1e293b;
  max-width: 100%;  /* ✅ Taşmayı engelle */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.story-platform{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:#64748b;
  max-width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:576px){
  .story-strip{ 
    gap: 12px; 
    padding: 6px 4px;
  }
  .story-item{ 
    width:72px; 
    min-width:72px; 
  }
  .story-ring{ 
    width:58px; 
    height:58px; 
  }
  .story-label{ font-size:11px; }
  .story-platform{ font-size:10px; }
}

/* =========================================================
   PLATFORM RENKLERI
========================================================= */
.story-item[data-platform="instagram"] .story-ring{
  --c1:#feda75; --c2:#d62976; --c3:#4f5bd5;
}
.story-item[data-platform="tiktok"] .story-ring{
  --c1:#25f4ee; --c2:#fe2c55; --c3:#ffffff;
}
.story-item[data-platform="youtube"] .story-ring{
  --c1:#ff0000; --c2:#ff4d4d; --c3:#ffffff;
}
.story-item[data-platform="twitter"] .story-ring{
  --c1:#1d9bf0; --c2:#8bd3ff; --c3:#ffffff;
}
.story-item[data-platform="facebook"] .story-ring{
  --c1:#1877f2; --c2:#4e9bff; --c3:#ffffff;
}
.story-item[data-platform="linkedin"] .story-ring{
  --c1:#0a66c2; --c2:#4aa3ff; --c3:#ffffff;
}
.story-item[data-platform="pinterest"] .story-ring{
  --c1:#e60023; --c2:#ff4d6d; --c3:#ffffff;
}
.story-item[data-platform="other"] .story-ring{
  --c1:#7c3aed; --c2:#22c55e; --c3:#f59e0b;
}


.idx-wrap{background:var(--bg); padding:2px 0 36px;}
.idx-container{max-width:1240px; margin:0 auto; padding:0 14px;}
.panel{
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}

/* ===== CHIPS ===== */
/* ===============================
   CHIPS AREA (WRAPPER)
================================ */
.chips-area{
  position: relative;
  overflow: hidden;        /* body overflow-x hidden olsa bile */
  width: 100%;
}

/* ===============================
   CHIPS STRIP
================================ */
.chips{
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;        /* 🔴 kritik */
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  scroll-behavior: smooth;
  cursor: grab; /* Masaüstünde 'el' simgesi çıkar */
  user-select: none; /* Sürüklerken yazıların maviye boyanmasını engeller */
  scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Masaüstü Ok Butonları */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex; /* Masaüstünde görünür */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    color: #0f172a;
}

.scroll-btn:hover {
    background: #f1f5f9;
    color: #2563eb;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.scroll-btn.left { left: -10px; } /* Hafif dışarı taşırırsanız daha şık durur */
.scroll-btn.right { right: -10px; }

/* 📱 MOBİL: OKLARI GİZLE */
@media (max-width: 768px) {
    .scroll-btn {
        display: none !important; /* Mobilde oklar kesinlikle gizlenir */
    }
    .chips-area {
        padding: 0; /* Oklar gidince boşluğu daraltabilirsiniz */
    }
}

/* Chipler alt satıra düşmesin */
.chips > .chip{
  flex: 0 0 auto;
}

/* Scrollbar gizle (ama çalışsın) */
.chips::-webkit-scrollbar{
  height: 0;
  display: none;
}
.chips{
  scrollbar-width: none; /* Firefox */
}

.chips:active {
  cursor: grabbing; /* Tıklayınca tutma simgesi */
}

/* CHIP */
.chip{
  flex:0 0 auto;
  padding:12px 30px;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
  transition:all .25s ease;
  white-space:nowrap;
}

.chip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(15,23,42,.1);
}

/* aktif chip */
.chip.active{
  background:linear-gradient(135deg,#2563eb,#22c55e);
  color:#fff;
  border:none;
  box-shadow:0 14px 30px rgba(37,99,235,.35);
}

/* ==========================
   MOBİL: YATAY KAYAN CHIPS
========================== */
@media (max-width: 768px){

  .chips-area{
    padding:14px 12px;
  }

  .chips{
    flex-wrap:nowrap;             /* ❌ alt satır yok */
    overflow-x:auto;              /* ✅ yatay scroll */
    overflow-y:hidden;
    gap:10px;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  /* scrollbar gizle */
  .chips::-webkit-scrollbar{ display:none; }
  .chips{ scrollbar-width:none; }

  .chip{
    scroll-snap-align:start;
    padding:10px 22px;
    font-size:14px;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
  }
}




/* ===== FILTER ROW ===== */
.filters{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 2px 14px;}
.ctrl{
  height:40px; border-radius:12px; background:#fff; border:1px solid var(--line);
  padding:0 12px; font-weight:800; color:#111827; outline:none;
}
.ctrl.search{width:250px}
.ctrl.small{width:120px}
.ctrl::placeholder{color:#9aa3b2; font-weight:800}
.ctrl-label {
  font-weight: 900;
  color: #334155;
  margin-right: -8px; /* Gap değerini dengelemek için negatif margin */
}
.btn-reset{
  height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:900; cursor:pointer;
}
.btn-reset:hover{background:#f8fafc}

/* ===== ALT 3 KART (FIXLENMİŞ & UYUMLU) ===== */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* kart */
.box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Dışarı taşmayı kökten engellemek için */
}

/* başlık */
.box h3 {
  margin: 0 0 14px 0;
  font-size: 18px;
  font-weight: 1000;
  color: #1f2a44;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* liste */
.box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

/* SATIR */
.box li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* Gap miktarını biraz azalttım */
  padding: 10px 0;
  border-bottom: 1px solid #eef3ff;
}

.box li:last-child {
  border-bottom: 0;
}

/* domain */
.box .d {
  flex: 1; /* Esnek alanı maksimize et */
  min-width: 0;
  color: #1f2a44;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
   font-size: 14px;
}

/* sağ blok (fiyat + ➕) */
.box li > div {
  flex-shrink: 0; /* Fiyat alanı asla daralmasın */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* fiyat */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

/* eski fiyat */
.oldline {
  color: #ef4444;
  text-decoration: line-through;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}

/* ➕ */
.plus {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #0f172a;
  font-weight: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

/* HEPSİNİ GÖSTER – KESİN ÇÖZÜM */
.hepsi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box; /* ÖNEMLİ: Padding'i genişliğe dahil eder */
  margin-top: 16px;
  padding: 12px;
  background: #ffbf00;
  color: #0f172a;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap; /* Mobilde taşarsa yazı küçülsün veya sığsın */
}

/* ===== MOBİL (Tablet & Telefon) ===== */
/* =========================================================
   ALT 3 KART (BOX) MOBIL DÜZENLEME
========================================================= */
@media (max-width: 768px) {
    /* Kartların yan yana değil alt alta gelmesi */
    .grid3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .box {
        padding: 12px 10px !important; /* Dış boşlukları daralttık */
    }

    /* Satır Yapısı: Domain ve Fiyat Grubunu iki uca it */
    .box li {
        display: flex !important;
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 10px 0 !important;
        gap: 8px !important; /* Domain ile fiyat grubu arasındaki min mesafe */
    }

    /* Domain Linki: Kalan boşluğu doldurur */
    .box .d {
        flex: 1 !important;
        min-width: 0;
        font-size: 13px !important;
        white-space: normal !important; /* Uzunsa alt satıra geçsin */
        word-break: break-all !important;
        line-height: 1.3;
    }

    /* Sağ Blok (Pill + Artı Butonu) */
    .box li > div {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important; /* Pill ve buton arası mesafe */
        flex-shrink: 0 !important; /* Sağ grup asla küçülmez */
        margin-left: auto !important; /* Domain kısaysa bile sağa yapıştırır */
    }

    /* Fiyat Kutucuğu (Mavi Pill) */
    .pill {
        height: 26px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
    }

    /* Eski Fiyat (İndirimdekiler için) */
    .oldline {
        font-size: 10px !important;
        margin-right: 2px !important;
        white-space: nowrap !important;
    }

    /* Artı Butonu: Tam sağa yaslı */
    .plus {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        margin: 0 !important; /* Dış boşlukları temizle */
        border-radius: 8px !important;
    }

    .hepsi {
        padding: 10px;
        font-size: 13px;
        text-align: center;
    }
}

/* ===== PAKETLER ===== */
.pack-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px;
  margin-bottom:12px;
  gap:12px;
}
.pack-head h2{
  margin:0;
  font-size:18px;
  font-weight:1000;
  color:#1f2a44;
}
.pack-toggle{
  height:34px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}

/* GRID */
.pack-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.pack{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
  overflow:hidden;
}

/* HEADER */
.pack-top{
  padding:14px 14px 10px;
  background:#fff7ea;
  border-bottom:1px solid #f1e6d6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pack-title{
  font-size:20px;
  font-weight:1000;
  color:#1f2a44;
  margin:0;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pack-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px dashed #a7c5ff;
  color:#1d4ed8;
  background:#eef4ff;
  padding:8px 10px;
  border-radius:12px;
  font-weight:1000;
  font-size:13px;
  white-space:nowrap;
  flex:0 0 auto;
}

/* BODY */
.pack-body{ padding:12px 14px; }

.pack-list{ list-style:none; margin:0; padding:0; }

/* ✅ asıl fix: li içinde taşmayı engelle + fiyatı sağda sabitle */
.pack-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #eef3ff;
  font-weight:700;
  color:#1f2a44;
}
.pack-list li:last-child{ border-bottom:0; }

/* PHP güncellemenle uyumlu class’lar */
.pack-list .site-name{
  flex:1;
  min-width:0;                 /* 🔑 ellipsis için şart */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pack-list .site-price{
  flex:0 0 auto;
  white-space:nowrap;
  color:#2563eb;
  font-weight:1000;
}

/* “More” satırları */
.pack-more-item.is-hidden{ display:none; }

/* MORE BUTTON */
.pack-more-btn{
  margin-top:10px;
  width:fit-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  background:#f3f4f6;
  color:#111827;
  border:0;
  font-weight:1000;
  cursor:pointer;
}

/* PRICE AREA */
.pack-price-area{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 14px;
  border-top:1px solid #eef3ff;
}
.pack-old{ color:#ef4444; text-decoration:line-through; font-weight:900; font-size:12px; }
.pack-new{ color:#2563eb; font-weight:1000; font-size:20px; line-height:1; }
.pack-disc{ color:#16a34a; font-weight:1000; font-size:12px; }

.pack-btn{
  background:#22c55e;
  color:#fff;
  font-weight:1000;
  border:0;
  border-radius:12px;
  padding:12px 18px;
  text-decoration:none;
  white-space:nowrap;
}

/* MINI */
.pack-mini-actions{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px 0;
}
.pack-tag{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:10px;
  background:#eef4ff;
  color:#1d4ed8;
  border:1px solid #dbe7ff;
  font-weight:1000;
  font-size:12px;
}

/* eski pack-more anchor’ı kullanan sayfalar için geriye dönük uyum */
.pack-more{
  margin-top:10px;
  display:inline-block;
  padding:10px 12px;
  border-radius:10px;
  background:#f3f4f6;
  color:#111827;
  text-decoration:none;
  font-weight:1000;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .grid3{ grid-template-columns:1fr; }
  .pack-grid{ grid-template-columns:1fr; }
  .ctrl.search{ width:100%; }
  .ctrl.small{ width:100%; }
}




/* ===== DataTables pagination fix ===== */
.dt-bottom{
  display:flex;
  justify-content:flex-end;
  padding:14px 14px 16px;
  border-top:1px solid var(--line);
  background:#fff;
}
.dt-bottom .dataTables_paginate{
  display:flex;
  align-items:center;
  gap:10px;
}
.dt-bottom .dataTables_paginate a{
  text-decoration:none !important;
}
.dt-bottom .paginate_button{
  border:0 !important;
  background:transparent !important;
  color:#111827 !important;
  font-weight:900 !important;
  padding:6px 10px !important;
  border-radius:10px !important;
}
.dt-bottom .paginate_button.current{
  background:#eef4ff !important;
  color:#1d4ed8 !important;
}
.dt-bottom .paginate_button:hover{
  background:#f3f4f6 !important;
}
.dt-bottom .paginate_button.disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}


/* Fav button */
.favbtn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  line-height: 0;
}
.favbtn svg{
  width:18px;
  height:18px;
  transition:.2s;
}
.favbtn.active svg{
  fill:#ef4444;
  stroke:#ef4444;
}
.favbtn:hover svg{
  transform: scale(1.1);
}

/* Toast */
.toast-wrap{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100% - 24px));
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  background: rgba(15,23,42,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}
.toast .tbtn{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.85);
  cursor:pointer;
  font-weight: 900;
}
.toast .tbtn:hover{ color:#fff; }




/* favoriler sayfası */
/* ===== Favoriler sayfası (modern görünüm) ===== */
.fav-wrap{ margin-top: 14px; }

.fav-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow: 0 16px 35px rgba(15,23,42,.06);
  overflow:hidden;
}

.fav-card-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
}

.fav-card-title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  color:#0f172a;
}

.fav-card-sub{
  font-weight: 800;
  font-size: 12px;
  color:#64748b;
}

.fav-table-scroll{
  width:100%;
  overflow:auto;
}

.fav-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  min-width: 980px; /* başlıklar sıkışmasın */
}

.fav-table thead th{
  position: sticky;
  top: 0;
  background:#f8fafc;
  color:#334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
  padding: 12px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.fav-table tbody td{
  padding: 12px 12px;
  border-bottom:1px solid #eef2f7;
  vertical-align: middle;
  font-weight: 800;
  color:#0f172a;
  white-space: nowrap;
}

.fav-table tbody tr:hover{
  background:#fafafa;
}


.sitelink{
  color:#2563eb;
  text-decoration:none;
  font-weight: 900;
}
.sitelink:hover{ text-decoration: underline; }

.price-blue{
  color:#2563eb;
  font-weight: 900;
}

.btn-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: #2563eb;
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
  white-space: nowrap;
}
.btn-add:hover{ filter: brightness(.98); }

/* Fav icon butonu */
.favbtn{
  width:34px;
  height:34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(15,23,42,.05);
}
.favbtn svg{ width:18px; height:18px; }
.favbtn:hover{ background:#fff7f7; border-color:#fecaca; }

/* Mobil: tabloyu yatay kaydır */
@media (max-width: 900px){
  .fav-table{ min-width: 900px; }
}



/* ===========================
   MARQUEE BAR - MOBILE FIX
=========================== */
.marquee-bar{
  width:100%;
  overflow:hidden;
}

.marquee-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  width:100%;
  max-width:1200px;   /* varsa layout’a uyum */
  margin:0 auto;
  box-sizing:border-box;
}

/* başlık sabit */
.marquee-title{
  flex:0 0 auto;
  white-space:nowrap;
}

/* kayan alan: flex taşmasını engelleyen en kritik kısım */
.marquee-track-wrap{
  flex:1 1 auto;
  min-width:0;        /* ✅ taşma fix */
  overflow:hidden;
}

/* buton sabit */
.marquee-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  /* 2 satıra kır */
  .marquee-inner{
    flex-wrap:wrap;
    gap:8px;
  }

  /* başlık 1. satır */
  .marquee-title{
    font-size:13px;
    line-height:1.2;
  }

  /* buton sağa yaslanıp 1. satırda kalsın */
  .marquee-btn{
    margin-left:auto;
    padding:8px 10px;
    font-size:13px;
  }

  /* kayan alan 2. satır: tam genişlik */
  .marquee-track-wrap{
    order:3;
    width:100%;
  }
  .marquee-track{
    width:100%;
  }
}

/* ===========================
   MOBILE: SADE HEADER (SADECE HA)
=========================== */
@media (max-width: 768px){

  /* Header ortala */
  .header-inner{
    justify-content: center;
  }

  /* Marka yazısını gizle 
  .brand-title{
    display: none !important;
  }
*/

  /* Sadece HA rozetini göster */
  .brand-badge{
    font-size: 20px;
    width: 52px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Menü / aksiyon alanlarını mobilde kapat */
  .header-actions{
    display: none !important;
  }
}

@media (max-width: 768px){
  .header{
    min-height: 56px;
  }
}


.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.service-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

.service-head h3{
  margin:8px 0 2px;
  font-size:18px;
}

.service-head small{
  color:#64748b;
}

.service-stats{
  list-style:none;
  padding:0;
  margin:12px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  font-size:14px;
}

.service-desc{
  font-size:14px;
  color:#475569;
  margin-bottom:12px;
}

.service-footer{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.price{
  font-weight:600;
  font-size:18px;
}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  color:#fff;
}

.badge-instagram{background:#e1306c;}
.badge-tiktok{background:#000;}
.badge-youtube{background:#ff0000;}
.badge-twitter{background:#1da1f2;}

.pagination{
  margin:30px 0;
  display:flex;
  gap:8px;
  justify-content:center;
}

.pagination a{
  padding:8px 12px;
  border-radius:8px;
  background:#f1f5f9;
}

.pagination a.active{
  background:#2563eb;
  color:#fff;
}




.pack-list.pack-open .pack-more-item {
  display: list-item;
}

.pack-price {
  color: #2563eb;
  font-weight: 900;
}

.pack-more-btn {
  border: 0;
  background: #f1f5f9;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 8px;
}


/* ana sayfa siteler sepete ekle butonu */
.td-add{ width:1%; white-space:nowrap; }

/* ana kapsayıcı */
.add-fab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* yeşil yuvarlak + */
.add-fab .plus{
  width:44px;
  height:44px;
  border-radius:999px;
  background:#22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:22px;
  line-height:1;
  box-shadow:0 10px 22px rgba(34,197,94,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* hover efekti */
.add-fab:hover .plus{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(34,197,94,.42);
}

/* sağdaki dikey etiket (normalde gizli) */
.add-fab .rail{
  position:absolute;
  right:-42px;              /* butonun sağında dursun */
  top:50%;
  transform:translateY(-50%) rotate(90deg);

  background:#0f172a;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:10px 12px;
  border-radius:10px;

  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, right .18s ease;
  box-shadow:0 14px 30px rgba(15,23,42,.22);
  white-space:nowrap;
}

/* hover’da etiket görünsün */
.add-fab:hover .rail{
  opacity:1;
  right:-54px;
}

.add-fab.loading .plus{
  opacity:.6;
  pointer-events:none;
}

.add-fab.added .plus{
  background:#16a34a;
}




/* =========================
   MOBILE MENU (Modern Light)
========================= */

/* Buton (masaüstünde gizli) */
.mobile-menu-btn{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.mobile-menu-btn .bar{
  display:block;
  width:18px;
  height:2px;
  background:#111;
  border-radius:2px;
}

/* Overlay */
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,17,17,.45);
  z-index:9998;
}

/* Drawer base (masaüstü) */
.mobile-drawer{ display:none; }

/* Desktop nav normal */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

  .mobile-menu-btn{ display:inline-flex; }

  /* Drawer */
  .mobile-drawer{
    display:block;
    position:fixed;
    top:0;
    right:0;
    width:340px;
    max-width:88vw;
    height:100vh;
    z-index:9999;

    transform:translateX(110%);
    transition:transform .25s ease;
    background:#ffffff;
    color:#111;
    overflow:auto;
    padding:16px 16px 18px;
    box-shadow:-18px 0 60px rgba(0,0,0,.18);
  }
  .mobile-drawer.open{ transform:translateX(0) !important; }

  /* Drawer head */
  .mobile-drawer .drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 2px 14px;
    border-bottom:1px solid rgba(0,0,0,.08);
    margin-bottom:14px;
  }
  .mobile-drawer .drawer-title{
    color:#111;
    font-weight:800;
    font-size:16px;
    letter-spacing:.2px;
  }
  .mobile-drawer .drawer-close{
    width:40px;
    height:40px;
    border:0;
    border-radius:12px;
    background:rgba(0,0,0,.06);
    color:#111;
    cursor:pointer;
  }

  /* Drawer içindeki nav dikey + görünürlük garantisi */
  .mobile-drawer nav.header-actions,
  .mobile-drawer .header-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    position:static !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
  }

  /* Yeni modern item (menu-item) */
  .mobile-drawer a.menu-item{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:14px 14px !important;
    border-radius:16px !important;
    background:#f6f7fb !important;
    border:1px solid rgba(0,0,0,.08) !important;
    color:#111 !important;
    text-decoration:none !important;
  }
  .mobile-drawer a.menu-item:active{ transform:scale(.99); }

  .mobile-drawer .mi-ico{
    width:40px;height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    flex:0 0 auto;
  }
  .mobile-drawer .mi-txt{
    flex:1 1 auto;
    min-width:0;
    font-weight:800;
    font-size:14px;
    color:#111 !important;
    opacity:1 !important;
    visibility:visible !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-drawer .mi-badge{
    background:#111;
    color:#fff;
    font-size:12px;
    padding:3px 8px;
    border-radius:999px;
    flex:0 0 auto;
  }
  .mobile-drawer .mi-arrow{
    color:rgba(0,0,0,.45);
    font-size:20px;
    line-height:1;
    flex:0 0 auto;
  }

  /* Geriye dönük: hala .hbtn kullanıyorsan aynı görünüm */
  .mobile-drawer a.hbtn{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 14px !important;
    border-radius:16px !important;
    background:#f6f7fb !important;
    border:1px solid rgba(0,0,0,.08) !important;
    color:#111 !important;
    text-decoration:none !important;
  }
  .mobile-drawer a.hbtn .txt{
    color:#111 !important;
    font-weight:800 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .mobile-drawer a.hbtn .ico{ flex:0 0 auto; }
  .mobile-drawer a.hbtn .badge{
    background:#111 !important;
    color:#fff !important;
    border-radius:999px !important;
    padding:3px 8px !important;
    font-size:12px !important;
  }
}

/* Menü yazılı buton */
.mobile-menu-btn.text-btn{
  font-weight:700;
  font-size:14px;
  padding:0 16px;
  width:auto;
  min-width:64px;
}

/* Eğer eski bar stilleri varsa etkisiz olsun */
.mobile-menu-btn.text-btn .bar{
  display:none !important;
}


/* =========================
   FORCE DESKTOP NAV OVERRIDE
========================= */

/* Sadece bizim masaüstü menü */
nav.header-actions.desktop-nav{
  background: rgba(255,255,255,.75) !important;

  backdrop-filter: blur(12px);
}

/* Linkler */
nav.header-actions.desktop-nav > a.hbtn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  color:#0f172a !important;
  font-weight:700 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
  transition: all .15s ease !important;
}

/* Hover */
nav.header-actions.desktop-nav > a.hbtn:hover{
  background:#fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

/* İkon chip */
nav.header-actions.desktop-nav .ico{
  width:34px !important;
  height:34px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: rgba(15,23,42,.06) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

/* Yazı */
nav.header-actions.desktop-nav .txt{
  font-size:14px !important;
  font-weight:800 !important;
  color:#0f172a !important;
}

/* Badge */
nav.header-actions.desktop-nav .badge{
  margin-left:6px !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  background:#111 !important;
  color:#fff !important;
}

/* Favoriler */
nav.header-actions.desktop-nav a.fav .badge{
  background:#dc2626 !important;
}

/* Sepet */
nav.header-actions.desktop-nav a.cart .badge{
  background:#111 !important;
}

/* Çıkış butonu */
nav.header-actions.desktop-nav a.logout{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.25) !important;
}
nav.header-actions.desktop-nav a.logout .ico{
  background: rgba(239,68,68,.15) !important;
}
nav.header-actions.desktop-nav a.logout:hover{
  background: rgba(239,68,68,.15) !important;
}

.table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table{
  min-width: 1100px; /* kolon sayısına göre ayarla */
}

/* Mobilde gövde taşmasını engelle */
body{
  overflow-x: hidden;
}


.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

/* Kaydırma için genişlik */
.table-scroll table{
  width: max-content;    /* 🔥 asıl fix */
  min-width: 920px;
  margin:0;
  border-collapse: separate;
  border-spacing: 0;
}


/* Başlık satırı */
.table-grid thead th{
  background:#f8fafc;
  font-weight:900;
  font-size:13px;
  color:#0f172a;
  white-space:nowrap;
  border-bottom:1px solid #e5e7eb !important;
}

/* Hücreler: net grid */
.table-grid th,
.table-grid td{
  padding:12px 10px;
  vertical-align:middle;
  border-right:1px solid #e5e7eb !important;
  border-bottom:1px solid #e5e7eb !important;
  white-space:nowrap; /* tablo gibi dursun */
}

/* Son kolon sağ çizgiyi kaldır */
.table-grid th:last-child,
.table-grid td:last-child{
  border-right:0 !important;
}

/* Son satır alt çizgiyi kaldır (isteğe bağlı, daha temiz) */
.table-grid tbody tr:last-child td{
  border-bottom:0 !important;
}

/* İşlem butonları taşmasın, aynı satırda dursun */
.table-grid td.actions{
  white-space:nowrap;
}
.table-grid td.actions .btnx{
  display:inline-block;
  margin-left:6px;
}
.table-grid td.actions .btnx:first-child{ margin-left:0; }

/* DataTables scroll yapısı boşluk bırakmasın */
#ordersScroll .dataTables_scroll,
#ordersScroll .dataTables_scrollBody{
  width: 100% !important;
}

#ordersScroll .dataTables_scrollHeadInner,
#ordersScroll .dataTables_scrollBody table{
  width: 100% !important;
}

/* Sağdaki boş “padding” gibi duran alanı bitir */
#ordersScroll .dataTables_scrollBody{
  overflow-x: auto !important;
}

/* Mobilde kaydırma için geniş tut */
@media (max-width: 992px){
  .table-scroll table{ min-width: 920px; }
}

/* Masaüstünde tablo container'ı doldursun, sağ boşluk kalmasın */
@media (min-width: 993px){
  .table-scroll{ overflow-x: visible; }
  .table-scroll table{ width: 100%; min-width: 0; }
}

.hzD-btn.primary{
  background: var(--brand);
  border-color: rgba(37,99,235,.65);
}



/* Örnek Hizmetler - Bootstrap yoksa da düzgün dursun */
.hizmet-sample{margin-top:18px}
.hizmet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hizmet-head h2{margin:0;font-size:20px;font-weight:800;color:#111}
.hizmet-all{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;color:#111;text-decoration:none;font-weight:800;
}
.hizmet-all:hover{border-color:rgba(0,0,0,.25)}

.hizmet-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 1200px){
  .hizmet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 576px){
  /* mobilde yatay kaydır */
  .hizmet-grid{
    display:flex;
    overflow:auto;
    gap:12px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .hizmet-card{min-width:260px;scroll-snap-align:start}
}

.hizmet-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
}
.hizmet-img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  background:#f3f4f6;
}
.hizmet-body{padding:12px 12px 10px}
.hizmet-title{font-weight:900;color:#111;margin:0 0 6px;font-size:15px;line-height:1.25}
.hizmet-desc{color:#4b5563;font-size:13px;line-height:1.35;margin:0 0 10px;min-height:34px}

.hizmet-foot{
  padding:10px 12px 12px;
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.hizmet-price{font-weight:900;color:#0f172a;white-space:nowrap}
.hizmet-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:12px;
  background:#2563eb;color:#fff;text-decoration:none;
  font-weight:900;border:1px solid rgba(0,0,0,.0);
  white-space:nowrap;
}
.hizmet-btn:hover{filter:brightness(.95)}


/* =========================
   KATEGORİLER DROPDOWN (catDrop) - FIX + WHITE THEME
   - Kesilme yok (fixed)
   - Üstte kalır (z-index)
========================= */

/* Dropdown kırpılmalarına karşı: mümkün olan kapsayıcılarda visible */
.header,
.header .header-inner,
.desktop-nav,
.navbar,
.container,
.container-fluid,
.row {
  overflow: visible;
}

/* Container */
#catDrop.dropdown{
  position: relative;
  display: inline-flex;
  z-index: 20000; /* header üstünde */
}

/* Button */
#catDrop > .hbtn{
  cursor: pointer;
  position: relative;
  z-index: 20001;
  pointer-events: auto;
}

/* Menu (fixed => parent overflow/transform etkisiz) */
/* Menü artık body altında: portal class */
.catdrop-menu{
  position: fixed;
  top: 0; left: 0;              /* JS set edecek */
  min-width: 260px;
  max-height: 70vh;
  overflow: auto;

  z-index: 999999;              /* her şeyin üstü */
  display: none;

  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 6px;

  backdrop-filter: none;
}

/* Açık hali */
.catdrop-menu.is-open{ display:block; }

/* Item / icon / empty (aynı tasarım) */
.catdrop-menu .dropdown-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#111827; font-weight:500; text-decoration:none;
  transition: background .15s ease, color .15s ease;
}
.catdrop-menu .dropdown-item:hover{ background:#f3f4f6; color:#000; }

.catdrop-menu .mi-ico{ color:#6b7280; font-size:14px; width:18px; text-align:center; }
.catdrop-menu .dropdown-empty{ padding:12px; color:#6b7280; font-size:14px; }

/* Mobilde zaten gizliyorsun (catDrop) */
@media (max-width: 991px){
  .desktop-nav #catDrop { display:none; }
}


/* =========================
   STANDART FİYAT GÖSTERİMİ
========================= */
.price-old{ text-decoration: line-through; color:#9ca3af; margin-right:8px; font-size:13px; }
.price-new{ font-weight:800; color:#111827; }

/* =========================
   TEK STANDART ➕ BUTON
   (TABLO + ALT LİSTELER + HER YER)
========================= */
.btn-add,
a.plus.btn-add{
  width: 38px;
  height: 34px;
  min-width: 38px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;

  color: #111827;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-add:hover,
a.plus.btn-add:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
}
.btn-add.is-busy{ opacity:.7; pointer-events:none; }



/* Alt kutularda + butonu turkuaz vs olmasın */
a.plus{ background: none; color: inherit; }



/* =========================
   TOAST (TOP)
========================= */
.toastx{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  pointer-events: none;
}
.toastx .toast-card{
  width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 16px;

  color:#0f172a;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toastx.show .toast-card{ opacity: 1; transform: translateY(0); }
.toastx .tx-row{ display:flex; align-items:flex-start; gap:10px; }
.toastx .tx-ico{
  width: 28px; height: 28px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.20);
  color:#059669;
  font-weight: 900;
  flex:0 0 auto;
}
.toastx .tx-title{ font-weight: 900; font-size: 14px; line-height: 1.2; }
.toastx .tx-sub{ margin-top: 2px; font-size: 12px; opacity: .8; }
.toastx .tx-bar{
  height: 3px; margin-top: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.10);
  overflow: hidden;
}
.toastx .tx-bar i{
  display:block; height:100%; width:100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg,#10b981,#34d399);
}
@keyframes toastbar{ to{ transform: translateX(0); } }




.pricebox{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.1;
}

.price-old{
  color:#64748b;
  font-weight:800;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(100,116,139,.7);
  font-size:12px;
}

.price-new{
  color:#2563eb;
  font-weight:900;
  font-size:14px;
}


.pack-price-area .price-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* 🔴 fiyatlar SOL */
  text-align:left;
}

.pack-old{
  font-size:13px;
  font-weight:700;
  color:#94a3b8;
  text-decoration:line-through;
}

.pack-new{
  font-size:22px;
  font-weight:800;
  color:#16a34a;
}


/* index paketler alanı */

.pack-price-area{
  padding:14px;
  border-top:1px dashed rgba(0,0,0,.08);

  display:flex;
  align-items:center;
  justify-content:space-between; /* 🔴 SOL – SAĞ AYRIMI */
  gap:16px;
}


/* Buton rengi */
.pack .pack-btn{ background:#2563eb; }
.pack.pack-c1 .pack-btn{ background:#16a34a; }
.pack.pack-c2 .pack-btn{ background:#f59e0b; }
.pack.pack-c3 .pack-btn{ background:#ef4444; }
.pack.pack-c4 .pack-btn{ background:#8b5cf6; }
.pack.pack-c5 .pack-btn{ background:#0ea5e9; }


.pack-old{ font-size:13px; font-weight:700; color:#94a3b8; text-decoration:line-through; }
.pack-new{ font-size:22px; font-weight:800; color:#16a34a; }

.pack-discount{
  font-size:10px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#2563eb;
  margin-left:8px;
}

.pack{ border-top:4px solid transparent; }
.pack-c0{ border-top-color:#2563eb; }
.pack-c1{ border-top-color:#16a34a; }
.pack-c2{ border-top-color:#f59e0b; }
.pack-c3{ border-top-color:#ef4444; }
.pack-c4{ border-top-color:#8b5cf6; }
.pack-c5{ border-top-color:#0ea5e9; }

/* ✅ Paket fiyat bloğunu sola al */
.pack-price-area{
  align-items:flex-start;   /* fiyatlar + buton sola */
  text-align:left;          /* yazılar sola */
}

/* Eğer pack-old / pack-new kendisi sağa kaçıyorsa */
.pack-old,
.pack-new{
  width:100%;
  text-align:left;
}

/* eski fiyat + kazanç satırı */
.pack-old-row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* üstü çizili eski fiyat */
.pack-old{
  font-size:13px;
  font-weight:700;
  color:#94a3b8;
  text-decoration:line-through;
}

/* ✅ KAZANÇ */
.pack-gain{
  font-size:13px;
  font-weight:800;
  color:#16a34a;
  background:rgba(22,163,74,.08);
  padding:3px 8px;
  border-radius:8px;
  white-space:nowrap;
}

/* =========================
   GLOBAL
========================= */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  overflow-x: hidden;
}

.idx-wrap,
.idx-container,
.panel,
.svc-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px;
}

/* =========================
   FILTERS
========================= */
.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.filters .ctrl {
  width: 100%;
}


/* =========================
   GRID 3 (ALT KARTLAR)
========================= */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* =========================
   PACKAGES
========================= */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pack {
  border-radius: 16px;
  padding: 14px;
}

/* =========================
   HİZMETLER
========================= */
.hizmet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hizmet-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* =========================
   STORY STRIP
========================= */
.story-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.story-strip::-webkit-scrollbar {
  height: 6px;
}

.story-strip::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

/* =====================================================
   📱 MOBILE (<=768px)
===================================================== */
@media (max-width: 768px) {


 .sitecell {
  display:flex;
  align-items:left;
  gap:1px;
  min-width: 140px;
    font-size: 14px;
  }
  

  .filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-desktop-only {
    display: none;
  }

  .sites-mobile-list {
    display: block;
  }

  .grid3 {
    grid-template-columns: 1fr;
  }

  .pack-grid {
    grid-template-columns: 1fr;
  }

  .hizmet-grid {
    grid-template-columns: 1fr;
  }

  .story-label {
    font-size: 12px;
  }
}

/* =====================================================
   📱 EXTRA SMALL (<=360px)
   CHIPS + FILTERS YATAY SCROLL
===================================================== */
@media (min-width: 360px) {

  /* CHIPS */
  .chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .chips > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chips {
    scrollbar-width: none;
  }

}

/* =====================================================
   📱📱 TABLET (769px – 1024px)
===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

  .filters {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pack-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hizmet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBİL (≤768px) ===== */
@media (max-width: 768px) {
  /* Satırın genel düzeni */
  .box li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Başlangıçta her şeyi sola yasla */
    padding: 10px 0 !important;
    gap: 0 !important; /* Ara boşlukları biz yöneteceğiz */
  }

  /* Domain ismi */
  .box .d {
    flex: 0 1 auto !important; /* İçeriği kadar yer kaplasın ama sığmazsa küçülsün */
    min-width: 0;
    max-width: 55%; /* Domain çok uzunsa fiyatı ezmesin */
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Çok uzunsa üç nokta koyar */
  }

  /* Fiyat ve Buton Kapsayıcısı */
  .box li > div {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important; /* Kalan TÜM boşluğu bu div kaplasın */
    justify-content: flex-end !important; /* İçindeki her şeyi en sağa itsin */
    gap: 12px !important; /* Fiyat (pill) ile buton (+) arasındaki mesafe */
  }

  /* İndirimli Fiyat Grubu (Eski fiyat yanındaysa) */
  .oldline {
    font-size: 10px !important;
    margin-right: 4px;
  }

  /* Mavi Fiyat Kutusu */
  .pill {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  /* Artı Butonu */
  .plus, .btn-add {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important; /* Buton asla ezilmesin */
    margin-left: 5px; /* Kenardan çok az pay */
  }
}


/* DataTables select kutusu genişlik ve görünüm düzeltmesi */
.dataTables_length select {
    width: auto !important;
    display: inline-block !important;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
}

/* Sayıların kutuya sığması için */
.dataTables_length {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Daha baskın olması için ana kapsayıcı sınıfıyla birlikte yazıyoruz */
.sd-card .sd-sales-badge {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #dcfce7 !important; 
    color: #166534 !important;
    padding: 6px 14px !important; /* Görseldeki dolgunluk için biraz artırdım */
    border-radius: 50px !important; /* Tam yuvarlak garanti olsun */
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: none !important; /* Varsa kenarlığı kaldırır */
    text-transform: none !important; /* Harf büyüklüğünü zorlamasın */
}



/* =========================================================
   GENEL TABLO AYARLARI (Masaüstü Sabitleme)
========================================================= */
#sitesTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    table-layout: fixed !important; /* Masaüstünde kolonları sabitler */
    margin: 0 !important;
}

/* Masaüstü Kolon Oranları - Toplam %100 */
.col-site { width: 30%; }
.col-da, .col-pa, .col-dr, .col-index, .col-news, .col-age { width: 8.5%; }
.col-ahrefs { width: 10%; }
.price-col { width: 12%; text-align: right !important; }
.add-col { width: 5%; text-align: right !important; }

#sitesTable thead th {
    background: #fef5e7 !important;
    padding: 12px 10px !important;
    font-size: 12px;
    border: none !important;
    white-space: nowrap;
}

#sitesTable tbody td {
    background: #fff;
    padding: 10px !important;
    vertical-align: middle;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

/* Site Hücresi ve Linki */
.sitecell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sitelink {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    word-break: break-all;
    display: inline-block;
    line-height: 1.2;
}

/* =========================================================
   MOBIL RESPONSIVE (Yan Yana Fiyat ve Tam Sığdırma)
========================================================= */
/* =========================================================
   MOBIL RESPONSIVE (Minimum Boşluk, Maksimum Alan)
========================================================= */
@media (max-width: 992px) {
    /* Gereksiz tüm kolonları ve boşluklarını yok et */
    .col-da, .col-pa, .col-dr, .col-ahrefs, .col-index, .col-news, .col-age,
    #sitesTable td:not(.price-col):not(.add-col):not([data-label="Site"]) {
        display: none !important;
    }

    #sitesTable {
        table-layout: fixed !important; 
        width: 100% !important;
        border-spacing: 0 !important; /* Satır arası boşluğu sıfırla */
    }

    /* SİTE İSMİ: Alanın %75'ini buraya veriyoruz */
    #sitesTable td[data-label="Site"] {
        width: 70% !important; 
        padding-left: 5px !important;  /* Kenar boşluğunu iyice daralttık */
        padding-right: 2px !important; /* Ara boşluğu sıfıra yaklaştırdık */
    }

    .favbtn { display: none !important; }

    .sitecell {
        display: block !important;
        padding: 0 !important;
    }

    .sitelink {
        font-size: 12px !important;
        font-weight: 500;
        display: inline-block;
        width: 100%;
        word-break: break-all; /* Uzun domainleri sığdırır */
        line-height: 1.2;
    }

    /* FİYATLAR: Yan yana ve boşluksuz */
    .price-col {
		font-size: 12px !important;
        width: 22% !important; /* Fiyatlara sadece yeteceği kadar alan */
        padding: 0 !important;
        text-align: right !important;
        vertical-align: middle;
    }

    .price-old {
		
        display: inline-block !important;
        color: #ef4444;
        text-decoration: line-through;
        font-weight: 700;
        font-size: 11px;
        margin-right: 3px; /* Eski ve yeni fiyat arası çok az boşluk */
    }

    .price-new {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--blue, #2563eb);
        color: #fff;
        font-weight: 800;
        font-size: 12px;
        white-space: nowrap;
    }

    /* EKLE BUTONU: En sağa yaslı ve dar */
    .add-col {
        width: 8% !important;
        padding-right: 5px !important;
        padding-left: 0 !important;
        text-align: right !important;
    }

    .btn-add {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   FİYAT WRAPPER (Mobil ve Desktop için)
========================================================= */
.price-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Desktop Fiyat Görünümü */
.price-old {
    color: #ff0000;
    text-decoration: line-through;
    font-size: 12px;
    font-weight: 500;
}

.price-new {
    color: #2563eb;
    font-weight: 700;
    font-size: 14px;
}

/* =========================================================
   MOBİL FİYAT GÖRÜNÜMÜ
========================================================= */
@media (max-width: 768px) {
    .price-wrapper {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .price-old {
        display: block;
        font-size: 10px;
        order: 1;
    }

    .price-new {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: #2563eb;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        white-space: nowrap;
        order: 2;
    }
}

/* Table Wrapper */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: hidden;
    }
}

/* ✅ MOBILE DATATABLES PAGINATION COMPACT */
@media (max-width:768px){

.dataTables_wrapper .dataTables_paginate{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:3px !important;
    padding:5px 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding:3px 6px !important;
    font-size:11px !important;
    min-width:auto !important;
    height:auto !important;
    line-height:1.2 !important;
    margin:2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next{
    padding:3px 5px !important;
    font-size:11px !important;
}

}
.page-link{
   padding:4px 6px !important;
   font-size:12px !important;
}