﻿:root{
  --brand-50:#fff5f5; --brand-100:#ffe3e3; --brand-200:#ffc9c9; --brand-300:#ffa8a8; --brand-400:#ff8787; --brand-500:#ff6b6b; --brand-600:#fa5252; --brand-700:#f03e3e; --brand-800:#e03131; --brand-900:#c92a2a;
  --brand-primary: var(--brand-700);
  --brand-primary-hover: var(--brand-800);
  --brand-accent: #c2185b;
}

/* Site daha geniÅŸ, iÃ§erikler daha kompakt */
body { background-color: #fff7f7; font-size: 0.95rem; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container-xxl{ max-width: 1600px; }
.site-header{ background: linear-gradient(90deg, var(--brand-50), #ffffff); border-bottom: 3px solid var(--brand-400)!important; }
.navbar-brand strong { color: var(--brand-800); }
.topbar{ min-height: 72px; }
.brand-logo{ height: 56px; width: auto; display:block; }
@media (max-width: 575.98px){ .brand-logo{ height: 44px; } }

.header-search{ max-width: 780px; }
.header-search.input-icon{ position: relative; }
.header-search.input-icon i{ position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #adb5bd; }
.header-search.input-icon input{ padding-left: 2.2rem; }

.btn-icon{ --size: 40px; width: var(--size); height: var(--size); display:inline-flex; align-items:center; justify-content:center; border-radius: .5rem; border:1px solid var(--brand-200); color: var(--brand-800); background: #fff; }
.btn-icon:hover{ background: var(--brand-50); color: var(--brand-900); border-color: var(--brand-300); }

.btn-primary{ background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }

a{ color: var(--brand-800); }
a:hover{ color: var(--brand-900); }

.card-header{ background-color: var(--brand-50); border-bottom: 1px solid var(--brand-200); }
.list-group-item.active{ background-color: var(--brand-600); border-color: var(--brand-600); }
.list-group-item.active a{ color: #fff !important; }

/* Chip styles (generic) */
.chips .chip{
  display:inline-block; padding:.35rem .7rem; border-radius:999px; background: var(--brand-50);
  border:1px solid var(--brand-200); color: var(--brand-800); text-decoration:none; white-space: nowrap;
}
.chips .chip:hover{ background: var(--brand-100); }
.chips .chip.active{ background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Homepage centered filters */
.home-filters{ background:#fff; border:1px solid var(--brand-200); border-radius: .75rem; box-shadow: 0 6px 16px rgba(0,0,0,.04); padding: 1rem; margin-bottom: 1rem; }
.home-filters .title{ font-weight: 600; color: var(--brand-800); }
.home-filters .lead-note{ color: #6c757d; }
.home-filters .input-icon{ position: relative; }
.home-filters .input-icon i{ position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #adb5bd; }
.home-filters .input-icon input{ padding-left: 2.2rem; }

/* Secondary navbar with hover dropdowns */
.nav-secondary{ background:#fff; }
.nav-hover>a{ font-weight:600; color: var(--brand-800); }
.nav-hover>a:hover{ color: var(--brand-900); }
.nav-dropdown{ position:absolute; left:0; top:100%; width: 680px; max-width: calc(100vw - 2rem); z-index: 1020; visibility: hidden; opacity:0; transform: translateY(8px); pointer-events: none; transition: all .18s ease; }
.nav-hover:hover .nav-dropdown{ visibility: visible; opacity:1; transform: translateY(0); pointer-events: auto; }
.nav-dropdown .dropdown-inner{ background:#fff; border:1px solid var(--brand-200); border-radius:.5rem; margin-top:.25rem; }
.dropdown-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.25rem .5rem; padding:.5rem; max-height: 50vh; overflow:auto; }
.dropdown-item{ display:block; padding:.35rem .5rem; border-radius:.35rem; color:#333; text-decoration:none; }
.dropdown-item:hover{ background: var(--brand-50); color: var(--brand-900); }

@media (max-width: 767.98px){
  .nav-dropdown{ width: calc(100vw - 2rem); }
  .dropdown-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.coupon-card { transition: box-shadow .2s ease; }
.coupon-card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1); }
.coupon-card { height: 100%; display: flex; flex-direction: column; }
.coupon-card .card-body{ flex: 1 1 auto; }
.coupon-card .card-footer{ margin-top: auto; }
.coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.modal-ad { min-height: 120px; display:flex; align-items:center; justify-content:center; background:#f1f3f5; border:1px dashed #ced4da; }
.sidebar-sticky { position: sticky; top: 1rem; }
.coupon-card .card-body { padding: 1.25rem 1.25rem; }
.coupon-card .store-logo { width: 88px; height: 88px; object-fit: contain; }

/* Text overflow handling for coupon blocks */
.break-words { word-break: break-word; overflow-wrap: anywhere; }
.coupon-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; min-height: calc(1.2em * 2); }
.coupon-desc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; }
.coupon-meta .badge{ background-color: var(--brand-100); color: var(--brand-800); }
.badge.bg-secondary{ background-color: var(--brand-100) !important; color: var(--brand-800) !important; }
.coupon-card .card-footer .btn{ font-weight: 600; }

.homepage-banner img{ max-height: 300px; object-fit: cover; }
.homepage-banner-full{ margin-bottom: 1.5rem; }
.homepage-banner-full img{ max-height: 420px; object-fit: cover; }
.homepage-ad{ margin-bottom: 1.5rem; }

.ad-slot{
  position: relative;
  border: 1px dashed var(--brand-200);
  border-radius: .75rem;
  background:#fff;
  min-height: 140px;
  overflow: hidden;
}
.ad-slot .adsbygoogle{
  display:block;
  width: 100%;
}
.ad-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: repeating-linear-gradient(135deg, rgba(255,107,107,.08) 0, rgba(255,107,107,.08) 14px, rgba(255,107,107,.15) 14px, rgba(255,107,107,.15) 28px);
  color: var(--brand-700);
  font-weight: 600;
  font-size: .95rem;
  padding: 1rem;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.ad-placeholder small{
  display:block;
  margin-top: .35rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #6c757d;
}
.ad-slot--leaderboard{ min-height: 120px; }
.ad-slot--skyscraper{ min-height: 480px; }
@media (max-width: 1199.98px){
  .ad-slot--skyscraper{ min-height: 360px; }
}
@media (max-width: 575.98px){
  .ad-slot--skyscraper{ min-height: 240px; }
}
.ad-slot.ad-slot--filled .ad-placeholder{
  opacity:0;
  visibility:hidden;
}
/* Banner overlay text */
.banner-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); color:#fff; padding: 1.25rem; }
.banner-title{ color:#fff; font-weight:700; text-shadow: 0 2px 12px rgba(0,0,0,.35); font-size: clamp(1.25rem, 2.5vw, 2.25rem); }
/* Banner ticker */
.banner-ticker{ position:absolute; left:0; right:0; bottom:0; background: rgba(0,0,0,.55); color:#fff; }
.ticker__viewport{ overflow:hidden; white-space:nowrap; }
.ticker__track{ display:inline-block; padding: .5rem 0; animation: ticker-scroll 25s linear infinite; will-change: transform; }
.ticker__item{ display:inline-flex; align-items:center; gap:.5rem; margin-right: 2rem; color:#fff; }
.ticker__item i{ color: var(--brand-200); }
@keyframes ticker-scroll { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

/* Desktop iyileÅŸtirmeleri: daha ferah kartlar */
@media (min-width: 992px){
  .coupon-card .card-body { padding: 1.5rem 1.5rem; }
  .coupon-card .store-logo { width: 96px; height: 96px; }
}

/* Mobile: sticky yan kolonlarÄ± devre dÄ±ÅŸÄ± bÄ±rak (modal aÃ§Ä±kken kayma azaltma) */
@media (max-width: 991.98px){
  .sidebar-sticky { position: static; top: auto; }
  .homepage-banner-full img{ max-height: 260px; }
  .coupon-card .store-logo { width: 64px; height: 64px; }
  .home-filters{ padding: .75rem; }
  .home-filters .chips{ overflow: auto; -webkit-overflow-scrolling: touch; }
  .nav-secondary .container-xxl{ flex-direction: column; }
  .nav-dropdown{ position: static; width: 100%; max-width: 100%; transform: none; opacity: 1; visibility: visible; pointer-events: auto; display: none; }
  .nav-hover.open .nav-dropdown{ display: block; }
}

/* iOS/Safari modal performansÄ± kÃ¼Ã§Ã¼k iyileÅŸtirme */
.modal{ -webkit-overflow-scrolling: touch; }

/* Footer styling */
.site-footer{ background: linear-gradient(0deg, #fff, var(--brand-50)); border-top: 3px solid var(--brand-200); }
.site-footer .footer-title{ color: var(--brand-800); letter-spacing: .02em; font-weight: 700; margin-bottom: .75rem; }
.site-footer a{ color: var(--brand-700); }
.site-footer a:hover{ color: var(--brand-900); }
.site-footer .footer-block ul{ padding-left: 1.1rem; margin: 0; }
.site-footer .footer-block li{ margin: .2rem 0; }

/* Modal iÃ§indeki kupon kodu daha okunaklÄ± */
#couponModal .coupon-code{ font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
#couponModal .input-group .btn{ padding: .55rem .9rem; }

.brand-logos{ background:#fff; border:1px solid var(--brand-200); border-radius:.75rem; padding: 1rem; }
.brand-logos .logos{ display:flex; flex-wrap: wrap; gap: 1rem .75rem; align-items:center; justify-content:center; }
.brand-logos a{ display:inline-flex; width:260px; height:120px; border:1px solid var(--brand-200); border-radius:.5rem; align-items:center; justify-content:center; background:#fff; padding:.75rem; transition: box-shadow .2s ease, transform .2s ease; }
.brand-logos a:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.brand-logos img{ max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(25%); }
.brand-logos a:hover img{ filter:none; }
@media (max-width: 575.98px){ .brand-logos a{ width: 200px; height: 100px; } }
.homepage-ad.below-logos{ margin: 1rem 0 1.25rem; }
.logos-title{ color: var(--brand-800); font-weight: 700; letter-spacing: .015em; }

.brand-logos-slider{ position: relative; }
.brand-logos-slider .logo-viewport{ overflow: hidden; }
.brand-logos-slider .logo-track{ display: flex; gap: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: .25rem; }
.brand-logos-slider .logo-item{ flex: 0 0 auto; width: 260px; height: 120px; border:1px solid var(--brand-200); border-radius:.5rem; display:flex; align-items:center; justify-content:center; background:#fff; padding:.75rem; scroll-snap-align: start; }
.brand-logos-slider .logo-item img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logos-slider .logo-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; border:1px solid var(--brand-200); background:#fff; color: var(--brand-800); display: inline-flex; align-items:center; justify-content:center; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.brand-logos-slider .logo-nav.prev{ left: -12px; }
.brand-logos-slider .logo-nav.next{ right: -12px; }
@media (max-width: 575.98px){
  .brand-logos-slider .logo-item{ width: 200px; height: 100px; }
  .brand-logos-slider .logo-nav{ display:none; }
}

/* Enhancements */
:root{ --radius: .75rem; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 6px 16px rgba(0,0,0,.08); }
.site-header{ box-shadow: var(--shadow-sm); }
.coupon-title{ font-weight: 600; }
.btn-primary{ background: linear-gradient(180deg, var(--brand-primary), var(--brand-700)); border-color: var(--brand-primary); box-shadow: 0 2px 0 rgba(0,0,0,.04); }
.btn-primary:hover, .btn-primary:focus{ background: linear-gradient(180deg, var(--brand-primary-hover), var(--brand-800)); border-color: var(--brand-primary-hover); }

/* Back to top */
.to-top{ position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 999px; display:none; align-items:center; justify-content:center; border:1px solid var(--brand-200); background:#fff; color: var(--brand-800); box-shadow: var(--shadow-md); z-index: 1050; }
.to-top.show{ display:flex; }
.to-top:hover{ background: var(--brand-50); color: var(--brand-900); }
