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