/* ================================================================
   Tiktakas — Global Stylesheet
   Tailwind CDN ile birlikte yüklenir.
   Renk değişkenleri base.html içindeki tailwind.config'den gelir.
   ================================================================ */


/* ─── Scrollbars ─────────────────────────────────────────────── */
.thin-scroll::-webkit-scrollbar { width: 3px; height: 3px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(0,212,160,.22); border-radius: 99px; }
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,212,160,.22) transparent; }


/* ─── Keyframe Animations ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0  0   rgba(0,212,160,.35); }
  70%  { box-shadow: 0 0 0  10px rgba(0,212,160,0); }
  100% { box-shadow: 0 0 0  0   rgba(0,212,160,0); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}


/* ─── Gradient Text ──────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(120deg, #00d4a0 0%, #00e5f0 45%, #7ae8d8 75%, #00d4a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}


/* ─── Utility Animations ─────────────────────────────────────── */
.float     { animation: float 5s ease-in-out infinite; }
.pulse-dot { animation: pulse-ring 2.5s cubic-bezier(.455,.03,.515,.955) infinite; }
.animate-fade-in   { animation: fadeIn 0.3s ease-out; }
.animate-bounce-in { animation: bounceIn 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); }


/* ─── Hero Swap Cards ────────────────────────────────────────── */
.swap-card {
  backdrop-filter: blur(16px);
  background: rgba(24,94,112,.75);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.swap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}


/* ─── Product Cards ──────────────────────────────────────────── */
.pcard { transition: transform .2s ease, box-shadow .2s ease; }
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.pcard-img { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.pcard:hover .pcard-img { transform: scale(1.07); }


/* ─── Category Pills ─────────────────────────────────────────── */
.cat-pill { transition: background .15s, border-color .15s, color .15s, transform .15s; }
.cat-pill:hover { transform: translateY(-1px); }


/* ─── Step Cards ─────────────────────────────────────────────── */
.step-card { transition: border-color .2s, transform .2s, box-shadow .2s; }
.step-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,212,160,.3);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}


/* ─── Filter Accordion ───────────────────────────────────────── */
.fb {
  transition: max-height .28s ease, opacity .2s ease;
  overflow: hidden;
}
.fb.closed {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ei { transition: transform .2s ease; }
.ei.up { transform: rotate(-180deg); }


/* ─── Sidebar Filter Group ───────────────────────────────────── */
.fg-btn { transition: background .15s; }
.fg-btn:hover { background: rgba(255,255,255,.04); }


/* ─── Print Styles (Fatura) ──────────────────────────────────── */
@media print {
  header, nav, footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .print-card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  .print-card * { color: #000 !important; }
  .print-green { color: #166534 !important; }
}