/* app/static/css/site.css — light (white) theme + mint accent */
:root{
  --bg: #ffffff;          /* Main background */
  --surface: #f8fafc;     /* Light surface (topbar, strips) */
  --text: #0f172a;        /* Dark slate text */
  --muted: #64748b;       /* Secondary text (slate-500) */
  --brand: #10b981;       /* Fresh mint/green (emerald 500) */
  --brand-ink: #065f46;   /* Darker mint for hover states */
  --link: #0ea5e9;        /* Vibrant blue/cyan for links */
  --card: #ffffff;        /* Card background */
  --border: #e5e7eb;      /* Light gray borders */
  --ring: #d1fae5;        /* Minty focus ring */
}

/* === Post Content Sections (Buyer's Guide, FAQ, Conclusion) === */
.buyers-guide, .faq, .conclusion {
  margin: 2.5em 0;
  padding: 1.5em 1.8em;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--surface);
}

.buyers-guide .guide-list { padding-left: 1.2rem; }
.faq .faq-item { border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin:10px 0; background:#fff; }
.faq .faq-item summary { cursor:pointer; font-weight:600; }
.faq .faq-answer { margin-top:8px; color:var(--text); }
.conclusion { border-top:1px solid var(--border); padding-top:8px; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:linear-gradient(180deg, var(--surface), #fffffff2);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px);
}
.topbar .brand a{
  color:var(--brand); text-decoration:none; font-weight:800; letter-spacing:.2px;
}
.navscroll{
  display:flex; gap:12px; overflow:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
}
.navlink{
  color:var(--text); opacity:.85; text-decoration:none; padding:8px 12px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.navlink:hover{opacity:1; border-color:var(--border); background:#f1f5f9}

/* Container */
.container{max-width:1080px; margin:24px auto; padding:0 16px}

/* Typo */
h1,h2,h3{line-height:1.25; margin:0 0 14px; color:var(--text)}
h1{font-size:1.9rem}
h2{font-size:1.45rem}
p{margin:0 0 12px; color:var(--text)}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  margin-top:36px;
  padding:18px 0;
  color:var(--muted);
  font-size:.95rem;
}

.footer-content, .footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-links a {
  color: var(--muted);
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 650px;
}

/* Utilities */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card:hover{
  transform:translateY(-2px);
  border-color:#dfe3e8;
  box-shadow: 0 8px 24px rgba(16,24,40,.08);
}
.card img{
  width:100%; height:160px; object-fit:cover; display:block; background:#f1f5f9;
}
.card .card-content{ padding:12px 14px }
.badge{
  display:inline-block; font-size:.78rem; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:2px 8px; background:#ffffff;
}

/* Card text */
.card h3{ font-size:1.1rem; margin:8px 0; color:var(--text) }
.card-image-container {
  position: relative;
}

.card-category-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  color: var(--text);
  font-weight: 500;
}

.card p{ font-size:.92rem; color:var(--muted); margin:6px 0 10px; }
.readmore{
  display:inline-block; margin-top:6px; font-size:.9rem; color:var(--brand);
  text-decoration:none; font-weight:600;
}
.readmore:hover{ text-decoration:underline; }

/* Buttons (opsiyonel) */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:10px; border:1px solid var(--border);
  background:#ffffff; color:var(--text); text-decoration:none; font-weight:600;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover{ border-color:#dfe3e8; box-shadow:0 6px 16px rgba(16,24,40,.08) }
.btn:active{ transform:translateY(1px) }

.btn-primary{
  background:var(--brand); color:#ffffff; border-color:transparent;
}
.btn-primary:hover{ background:#0fb07a }          /* brand biraz koyulsun */
.btn-primary:active{ background:var(--brand-ink) }
.btn:focus{ outline:2px solid var(--ring); outline-offset:2px }

/* Content blocks (post sayfası için yumuşak bölümler) */
.section{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  margin:14px 0;
}

/* Code, blockquote vb. (eğer markdown varsa) */
pre, code{
  font-family: ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
}
pre{
  background:#f8fafc;
  border:1px solid var(--border);
  padding:12px; border-radius:12px; overflow:auto;
}
blockquote{
  margin:12px 0; padding:8px 14px; border-left:3px solid var(--brand);
  background:#f8fffb;
  color:#0f172a;
}

/* Forms */
input, select, textarea{
  background:#ffffff; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--ring); outline-offset:2px; border-color:#bbf7d0;
}

/* Small helpers */
.muted{ color:var(--muted) }
.hr{ height:1px; background:var(--border); border:0; margin:14px 0 }


.post .intro-text {
  font-size: 1.1rem; /* Slightly larger font for the intro */
  line-height: 1.7;
  color: #333;
  margin-bottom: 2em;
}

/* Consolidated "Quick Take" summary box style */
.intro-text blockquote {
  background-color: #f3f7fd; /* A very light, clean blue background */
  border: 1px solid #dbe8f8; /* A subtle border */
  border-left: 5px solid #4a90e2; /* A stronger left accent border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* A soft shadow for depth */
}

/* Make bold text stand out more */
.post .intro-text strong,
.post .intro-text b {
  color: #2d3748; /* Darker text color for emphasis */
  font-weight: 600;
}

/* CSS for the new hero image */
.post-hero-image {
  width: 100%;
  max-height: 450px; /* Controls the max height */
  object-fit: cover;   /* Prevents image distortion */
  border-radius: 12px; /* Soft rounded corners */
  margin: 1.5em 0 2.5em; /* Adds space above and below */
  display: block;
  background-color: #f0f0f0; /* Placeholder color while loading */
}

/* Post meta for author and date */
.post-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: -10px 0 20px 0;
}

/* === Author Box (at end of post) === */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.author-box-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.author-box-info { flex: 1; }
.author-box-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.author-box-name { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; }
.author-box-bio {
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.9;
  line-height: 1.6;
  margin: 0;
}

/* === Product Gallery Section === */
.product-gallery {
  text-align: center;
  margin: 3em 0;
  padding: 2em 0;
  background-color: var(--surface);
  border-radius: 16px;
}

.product-gallery h2 {
  margin-bottom: 1.5em;
}

.gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px; /* Width of each card */
  gap: 20px;
  overflow-x: auto; /* Enable horizontal scrolling */
  padding: 10px 24px;
  scroll-snap-type: x mandatory; /* Smooth snapping effect */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Hide scrollbar for a cleaner look */
.gallery-grid::-webkit-scrollbar {
  display: none;
}

.gallery-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  width: 220px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  scroll-snap-align: start; /* Align cards to the start on scroll */
}

.gallery-card:hover {
  transform: translateY(-3px);
  border-color: #dfe3e8;
  box-shadow: 0 8px 24px rgba(16,24,40,.1);
}

.gallery-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background-color: #f1f5f9;
}

.gallery-card-body { padding: 14px; text-align: left; flex-grow: 1; display: flex; flex-direction: column; }
.gallery-card-title { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 8px; flex-grow: 1; }
.gallery-card-rating { font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; }
.gallery-card-cta { display: block; text-align: center; background: var(--brand); color: #fff; padding: 8px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background .15s ease; }
.gallery-card-cta:hover { background: var(--brand-ink); }

.gallery-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: #e53e3e; color: #fff;
  padding: 3px 8px; border-radius: 6px;
  font-size: 0.7rem; font-weight: 600;
}

/* === Authors Page === */
.authors-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.author-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.author-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-info {
  flex: 1;
}

.author-info h3 {
  margin: 0 0 .5rem;
  font-weight: 600;
}

.author-category {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: .5rem;
}

.author-bio {
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}

.card{
  display:block;
  background: linear-gradient(180deg, rgba(16,185,129,.03), rgba(16,185,129,0) 38%), var(--surface);
  border: 1px solid rgba(15,23,42,0.06);         /* çok hafif sınır */
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Görsel alanı */
.card-image-container{
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 16/9;
  background: #f3f4f6; /* görsel geç yüklenirse gri patlama olmasın */
}

/* üstte yumuşak bir gradient; etiketlerin okunurluğu artar */
.card-image-container::after { content: none !important; }

.cat-badge{
  position:absolute;
  right:.75rem;                  /* sağa al */
  bottom:.20rem;                 /* alta al */
  left:auto; top:auto;           /* üst/sol’u iptal et */
  padding:.32rem .66rem;
  border-radius:999px;
  font-size:.72rem; font-weight:600; line-height:1;
  color:#111;
  background: rgba(109, 198, 194, 0.92);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  z-index: 2;
}

/* görüntü orana uysun ve taşmayı düzgün kırpsın */
.card-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 10%;  /* üstten kırpmayı azalt */
}



.card-category-badge { display:none !important; }


/* İçerik alanı */
.card-content{ padding:.75rem .9rem 1rem; }
.readmore{ display:inline-block; margin-top:.35rem; color:var(--brand); font-weight:600; }
.readmore:hover{ color:var(--brand-ink); }

.ribbon-new{
  position:absolute;
  top:14px; right:-32px;
  transform: rotate(45deg);
  background: #ef4444;           /* kırmızı (Tailwind red-500) */
  color:#fff;
  padding: 4px 44px;
  font-size:.70rem; font-weight:800; letter-spacing:.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 2;
  border-radius: 2px;
}

/* === eBay Product Grid === */
 /* Trust Badge */
.trust-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  color: #fff;
  background: #9ca3af; /* default gray */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.trust-high   { background: #10b981; }   /* emerald-500 */
.trust-medium { background: #f59e0b; }   /* amber-500 */
.trust-low    { background: #ef4444; }   /* red-500 */

/* === eBay Product Grid === */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 1.5em;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.product-image-container {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f8fafc;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Trust Badge (top-right) */
.trust-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  color: #fff;
  background: #9ca3af; /* default gray */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.trust-high   { background: #10b981; }   /* emerald */
.trust-medium { background: #f59e0b; }   /* amber */
.trust-low    { background: #ef4444; }   /* red */

/* Info section */
.product-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.product-price {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--brand);
}

.seller-info {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ——— Insights (minimal) ——— */
.insights { border-radius:16px; background:var(--surface); border:1px solid var(--border); }
.insights-head h2{ margin:0 0 .25rem; }
.insights-head .muted{ margin:0 0 1rem; }

/* KPI row */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:12px; margin:8px 0 14px;
}
.kpi{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
}
.kpi-ico .ico{ width:22px; height:22px; fill:var(--brand); }
.kpi-label{ font-size:.85rem; color:var(--muted); line-height:1.2; }
.kpi-value{ font-size:1.05rem; font-weight:700; }

/* Insights table (single source of truth) */
.insights-table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  font-size:.97rem;
}
.insights-table th, .insights-table td{
  padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;
}
.insights-table th{ width:40%; color:#475569; background:#f9fafb; font-weight:600; }
.insights-table tr:last-child th, .insights-table tr:last-child td{ border-bottom:0; }

/* —— Quick Look —— */
:root{
  --ql-bg: #f6f9ff;
  --ql-card: #ffffff;
  --ql-border: #e6ecff;
  --ql-ink: #0b1b3a;
  --ql-muted: #6b7a99;
  --ql-accent: #4f7cff; /* pastel mavi */
}
.insights--quicklook{
  border-radius:16px; background: var(--ql-bg); border: 1px solid var(--ql-border);
}
.ql-title{ margin:0 0 .25rem; color:var(--ql-ink); }
.ql-sub{ margin:0 0 1rem; color:var(--text); font-weight:500; line-height:1.55; opacity:.95; }

.ql-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); display:grid; gap:14px; }
@media (min-width: 1200px){ .ql-grid{ grid-template-columns: repeat(3, minmax(240px, 1fr)); } }

.ql-card{
  background: var(--ql-card);
  border:1px solid var(--ql-border);
  border-radius:14px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:4px;
  min-height:110px;
}
.ql-icon{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:10px; background:#edf2ff; border:1px solid var(--ql-border); margin-bottom:4px;
}
.ql-ico{ width:18px; height:18px; fill: var(--ql-accent); }
.ql-head{ font-size:.9rem; color:var(--ql-muted); }
.ql-val{ font-size:1.05rem; font-weight:800; color:var(--ql-ink); letter-spacing:.2px; }
.ql-subtle{ font-size:.85rem; color:var(--ql-muted); }

/* View details — button */
.ql-details{ margin-top:12px; }
.ql-details > summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; list-style:none;
  padding:10px 14px; border-radius:10px; background:#ef4444; color:#fff; font-weight:700;
  border:1px solid #ef4444; box-shadow:0 2px 6px rgba(239,68,68,.25);
  transition:background .15s ease, transform .02s ease; margin-top:10px;
}
.ql-details > summary::-webkit-details-marker{ display:none; }
.ql-details > summary:hover{ background:#dc2626; }
.ql-details[open] > summary{ background:#b91c1c; }
.ql-details > summary:active{ transform:translateY(1px); }

/* Hero image (single) */
.post-hero-image{ width:100%; max-height:280px; object-fit:cover; border-radius:12px; margin:1em 0 1.5em; display:block; background:#f0f0f0; }

/* HERO CARD (image left + intro right) */
.hero-card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 6px 18px rgba(16,24,40,.06); padding:14px; margin:1rem 0 1.25rem;
}
.hero-card-grid{
  display:grid; grid-template-columns:0.48fr 0.52fr; gap:16px; align-items:center;
}
.hero-card-media{ margin:0; padding:0; border-radius:12px; overflow:hidden; background:#f3f4f6; }
.hero-card-img{ display:block; width:100%; height:260px; object-fit:cover; object-position:center; }
.hero-card-body{ min-width:0; }
.hero-card-title{ margin:2px 0 8px; font-size:1.15rem; line-height:1.3; color:var(--text); font-weight:800; }
.hero-card-text{ font-size:1.02rem; line-height:1.7; color:#243046; }

@media (max-width:960px){
  .hero-card-grid{ grid-template-columns:1fr; }
  .hero-card-img{ height:220px; }
}


/* Quick Look – ikonları ortala */
.ql-card{ display:flex; flex-direction:column; gap:6px; align-items: flex-start; }
.ql-icon{ align-self: center; }           /* ikon kutusunu ortala */
.ql-ico{ width:20px; height:20px; }       /* biraz daha okunaklı */

/* View details butonu ortada */
.ql-details{ margin-top:14px; display:flex; justify-content:center; }

/* Quick Take sütununu biraz büyüt ve satır aralarını aç */
.summary-two-col{ grid-template-columns: 0.35fr 0.65fr; } /* istersen 0.30/0.70 bırak */
.quick-take-col{ font-size: 1.05rem; }
 
/* --- Quick Take (sol) daha geniş --- */
.summary-two-col{
  grid-template-columns: 0.44fr 0.56fr;  /* was: 0.35/0.65 */
}

/* XXL ekranlarda solda daha da ferah bir görünüm */
@media (min-width: 1400px){
  .summary-two-col{
    grid-template-columns: 0.48fr 0.52fr;
  }
}

/* Tablet ve altı: tek sütun */
@media (max-width: 1024px){
  .summary-two-col{
    grid-template-columns: 1fr;
  }
}

/* Sol sütundaki liste aralıklarını biraz açalım */
.quick-take-col .intro-text ul{ margin-left: 1.2rem; }
.quick-take-col .intro-text li{ margin-bottom: 10px; line-height: 1.7; }


/* --- Quick Look ikon & kart iyileştirmeleri --- */
.ql-card{
  background: var(--ql-card);
  border: 1px solid var(--ql-border);
  border-radius: 14px;
  padding: 14px 16px;          /* biraz daha nefes */
  display: flex; flex-direction: column; gap: 6px;
  min-height: 120px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ql-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,27,58,.08);
  border-color: #d9e2ff;
}

/* İkon kapsülü: daha büyük, hafif gradient, gölge */
.ql-icon{
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #f2f6ff, #eaf1ff);
  border: 1px solid #dfe6ff;
  box-shadow: 0 2px 8px rgba(79,124,255,.12);
  margin-bottom: 6px;
}

/* SVG'nin kendisi biraz büyük ve net */
.ql-ico{
  width: 22px; height: 22px;
  fill: #4f7cff;               /* pastel mavi */
  filter: drop-shadow(0 1px 0 rgba(79,124,255,.08));
}

/* Başlık/Değer kontrastı */
.ql-head{ font-size: .92rem; color: #5b6a88; font-weight: 600; }
.ql-val{ font-size: 1.08rem; font-weight: 800; color: #0b1b3a; letter-spacing: .1px; }

/* “View details” butonu daha modern “chip” görünümü */
.ql-details > summary{
  padding: 10px 16px;
  border-radius: 999px;
  background: #ef4444;
  border: 1px solid #ef4444;
  box-shadow: 0 4px 12px rgba(239,68,68,.18);
}
.ql-details > summary:hover{ background:#dc2626; }
.ql-details[open] > summary{ background:#b91c1c; }

/* Grid kırılımını koru ama kutular arası nefes aç */
.ql-grid{ gap: 16px; }


/* --- Seller rating stars --- */
.seller-rating{ margin-top: 6px; }
.stars{ display:flex; align-items:center; gap:2px; line-height:1; }

.star{
  font-size: 16px;
  display:inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  color: #e5e7eb;          /* boş yıldız rengi (arka plan) */
}

/* Tam dolu yıldız */
.star.full{ color: #f59e0b; }   /* amber-500 */

/* Yarım yıldız: metni altın, sağ yarıyı maskeleriz */
.star.half{
  color: #f59e0b;
  overflow: hidden;
}
.star.half::after{
  content: "★";
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background: #e5e7eb;         /* boş taraf kapatıcı */
  -webkit-background-clip: text;
  background-clip: text;
  color: #e5e7eb;
}

/* Boş yıldız: gri */
.star.empty{ color: #e5e7eb; }

.seller-label{
  margin-top: 4px;
  font-size: .88rem;
  color: var(--muted);
}


/* === Top 5 Rating Table === */
.rating-table{
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.rating-table .rt-title{ margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 800; }
.rating-table .table-wrap{ overflow-x:auto; }
.rating-table table{
  width: 100%; border-collapse: collapse; background:#fff; border:1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.rating-table th, .rating-table td{
  padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle;
}
.rating-table thead th{ background:#f9fafb; color:#475569; font-weight:700; }
.rating-table tbody tr:last-child td{ border-bottom: 0; }

.col-prod{ width: 48%; }
.col-rev{ width: 12%; white-space:nowrap; }
.col-pos{ width: 12%; white-space:nowrap; }
.col-score{ width: 28%; }

.tab-prod{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.tab-prod img{
  width: 70px; height: 70px; object-fit: cover; border-radius: 10px; border:1px solid var(--border); background:#f3f4f6;
}
.tab-prod .t{ font-weight: 600; line-height: 1.35; }

.score-wrap{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.score-num{ font-weight: 800; font-size: 1rem; color: #0b1b3a; }
.stars-int{ font-size: 16px; letter-spacing: 1px; color: #f59e0b; } /* ★☆☆☆☆ */

.rating-table .col-img{ width:72px; }
.rating-table .tab-img img{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#f3f4f6; display:block; }
.rating-table .col-minti, .rating-table .col-shipfree, .rating-table .col-rev, .rating-table .col-pos { white-space:nowrap; }
.rating-table .col-stars .score-wrap{ display:flex; align-items:center; gap:8px; }
.rating-table .score-label{ font-size:.85rem; color:var(--muted); }


/* tek satır 6 kolon (desktop) */
.ql-grid.ql-grid--six{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:1200px){
  .ql-grid.ql-grid--six{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .ql-grid.ql-grid--six{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}