: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:900;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
}

#price{
  font-weight:600;
  font-size:16px;
}

.marquee-item #price{
  color:#22c55e;                 /* istersen beyaz/soft */
  font-weight:900;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  text-decoration:none;          /* ✅ üstü çizili olmasın */
}


.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)}

/* =========================
   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;
  gap:18px;
  padding:6px 8px;

  overflow-x:auto;                 /* ✅ scroll VAR */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;

  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* IE/Legacy */
}

/* Chrome/Safari/Edge scrollbar gizle */
.story-strip::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* Desktop padding */
@media (min-width: 992px){
  .story-strip{ padding-left: 20px; padding-right: 20px; }
}

/* =========================================================
   ITEM
   Desktop'ta: container genişliğine göre 12 adet sığacak şekilde hesap
   calc( (100% - (11*gap)) / 12 )
========================================================= */
.story-item{
  flex: 0 0 auto;                  /* ✅ kaydırmada şart */
  width: 86px;                     /* default (mobil/tablet) */
  min-width: 86px;
  text-align:center;
  text-decoration:none !important;
  color:#111;
}

@media (min-width: 992px){
  .story-item{
    width: calc((100% - (11 * 18px)) / 12);
    min-width: calc((100% - (11 * 18px)) / 12); /* ✅ 12 sığsın */
  }
}

.story-item:hover .story-ring{ transform:translateY(-1px); }

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

  display:inline-flex;
  width:70px;
  height:70px;
  padding:3px;
  border-radius:999px;
  background:conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1));
  transition:.18s ease;
  animation:ringSpin 2.8s linear infinite;
  will-change: transform;
}
@keyframes ringSpin{ to { transform: rotate(360deg); } }
.story-item:hover .story-ring{
  animation-duration:1.6s;
  transform: translateY(-1px) rotate(0deg);
}

/* =========================================================
   AVATAR
========================================================= */
.story-avatar{
  width:100%;
  height:100%;
  border-radius:999px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:3px solid #fff;
}
.story-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.story-initials{
  color:#fff;
  font-weight:900;
  letter-spacing:.5px;
}

/* =========================================================
   TEXTS
========================================================= */
.story-label{
  display:block;
  margin-top:7px;
  font-size:12.5px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-platform{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  color:rgba(0,0,0,.55);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:576px){
  .svc-head{ align-items:center; }
  .svc-title{ font-size:16px; }
  .svc-btn{ padding:9px 10px; border-radius:12px; }
  .story-item{ width:78px; min-width:78px; }
  .story-ring{ width:62px; height:62px; } /* isteğe bağlı */
}

/* =========================================================
   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:18px 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{
  background:#f6f7fb;
  padding:22px;
  overflow:hidden;
}

.chips{
  display:flex;
  flex-wrap:wrap;                 /* ✅ Desktop: alt satıra kayar */
  gap:14px;
  align-items:center;
}

/* 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:4px;}
.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 (görseldeki gibi) ===== */
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:18px;}
.box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
  padding:16px;
}
.box h3{
  margin:0 0 14px 0;
  font-size:18px;
  font-weight:1000;
  color:#1f2a44;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.box{ padding:18px; }
.box li{ padding:12px 0; }


.box ul{list-style:none; margin:0; padding:0;}
.box li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #eef3ff;
}
.box li:last-child{border-bottom:0}
.box .d{
  color:#1f2a44;
  font-weight:900;
  text-decoration:none;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 12px;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-weight:1000;
  font-size:12px;
  white-space:nowrap;
}
.plus{
  width:30px;height:28px;
  border-radius:8px;
  background:#22d3ee;
  color:#0f172a;
  font-weight:1000;
  display:grid;
  place-items:center;
  text-decoration:none;
}
.oldline{
  color:#ef4444;
  text-decoration:line-through;
  font-weight:900;
  font-size:12px;
  margin-right:8px;
}
.hepsi{
  margin-top:14px;
  display:block;
  width:100%;
  border-radius:12px;
  padding:12px 10px;
  text-align:center;
  background:#ffbf00;
  color:#0f172a;
  font-weight:1000;
  text-decoration:none;
}

/* ===== 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:900;
  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;
}

.sitecell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 240px;
}

.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;
}



/* =========================================================
   RESPONSIVE: Kolon davranışları (Telefon / Tablet / Desktop)
   Kolonlar:
   .col-site | .col-da .col-pa .col-dr .col-ahrefs .col-index .col-news .col-age | .price-col | .add-col
========================================================= */

/* ✅ Varsayılan: fiyat & add görünür */
#sitesTable th.price-col,
#sitesTable td.price-col,
#sitesTable th.add-col,
#sitesTable td.add-col{
  display: table-cell;
  white-space: nowrap;
}

/* =========================================================
   TABLE BASE (kart satırlar)
========================================================= */
.table-shell{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;}
#sitesTable{width:100%!important; border-collapse:separate!important; border-spacing:0 12px!important; margin:0!important;}
#sitesTable thead th{
  background:#eef3fb!important; color:#1f2a44!important; font-weight:900!important; font-size:13px!important;
  border:0!important; padding:14px 14px!important; white-space:nowrap;
}
#sitesTable tbody td{
  background:var(--soft);
  border-top:1px solid #edf3ff; border-bottom:1px solid #edf3ff;
  padding:16px 14px; font-size:13px; font-weight:800; color:#0f172a; vertical-align:middle;
}
#sitesTable tbody tr td:first-child{
  border-left:1px solid #edf3ff; border-top-left-radius:14px; border-bottom-left-radius:14px;
}
#sitesTable tbody tr td:last-child{
  border-right:1px solid #edf3ff; border-top-right-radius:14px; border-bottom-right-radius:14px;
}

.sitecell{display:flex; align-items:center; gap:12px; min-width:0;}
.favbtn{
  width:34px;height:34px; border-radius:12px; border:1px solid #dbe7ff; background:#fff;
  display:grid; place-items:center; cursor:pointer;
}
.favbtn svg{width:18px;height:18px}
.sitelink{color:var(--blue); font-weight:900; text-decoration:none;}
.sitelink:hover{text-decoration:underline}

 /* hover / aktif efekt istemiyorsan */
  #sitesTable .btn-add:hover,
  #sitesTable .btn-add:active{
    background: none !important;
    transform: none !important;
  }

/* =========================
   MOBİL GRID FIX: Site | Fiyat | +
   - Başlık + satır kolonları aynı genişlikte
   - + butonu yuvarlak değil (pill)
========================= */
/* =========================
   MOBİL: + butonu sade (arka plan yok)
========================= */
@media (max-width: 768px){

  #sitesTable .btn-add{
    background: none !important;      /* ❌ arka plan yok */
    box-shadow: none !important;
    border: 0 !important;

    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;

    color: var(--blue);               /* + rengi */
    font-size: 22px;                  /* + boyutu */
    font-weight: 900;
    line-height: 1;

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

  /* hover / aktif efekt istemiyorsan */
  #sitesTable .btn-add:hover,
  #sitesTable .btn-add:active{
    background: none !important;
    transform: none !important;
  }
}



/* =========================================================
   2) TABLET (769px - 992px)
   Örnek: DA/PA/Ahrefs/News gizli, DR+Index+Yaş açık
========================================================= */
@media (min-width: 769px) and (max-width: 992px){
  #sitesTable th.col-da,
  #sitesTable th.col-pa,
  #sitesTable th.col-ahrefs,
  #sitesTable th.col-news{ display:none !important; }

  /* burada nth-child kullanmak istersen güvenli, çünkü grid yok.
     ama istersen class’lı td yok; o yüzden mevcut sıralamayı baz alıyoruz: */
  #sitesTable td:nth-child(2),
  #sitesTable td:nth-child(3),
  #sitesTable td:nth-child(5),
  #sitesTable td:nth-child(7){ display:none !important; }

  #sitesTable th.col-price, #sitesTable td.price-col{ width:110px !important; }
  #sitesTable th.col-add,   #sitesTable td.add-col{ width:64px !important; }

  #sitesTable .btn-add{
    min-width:46px !important;
    width:46px !important;
    height:42px !important;
    padding:0 !important;
  }
}

/* =========================================================
   3) Küçük Laptop (993px - 1200px)
========================================================= */
@media (min-width: 993px) and (max-width: 1200px){
  #sitesTable th.col-price, #sitesTable td.price-col{ width:120px !important; }
  #sitesTable th.col-add,   #sitesTable td.add-col{ width:72px !important; }
}

/* add/price kolon hizası (genel) */
#sitesTable th.add-col,
#sitesTable td.add-col{ text-align:right; white-space:nowrap; width:1%; }
#sitesTable th.price-col,
#sitesTable td.price-col{ white-space:nowrap; }