/* Buttons. .cta and bare submit buttons are what existing pages already use. */
.btn, .cta, button[type="submit"] {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover, .cta:hover, button[type="submit"]:hover {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-secondary); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-secondary-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn[disabled], button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Cards */
.cards { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card img { border-radius: var(--radius-sm); margin-bottom: var(--space-4); width: 100%; }
.card-header { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); font-weight: 600; }
.card-footer { padding-top: var(--space-3); margin-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* Navbar (the <header> in _Layout) */
.navbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.navbar-brand { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary-dark); }
.navbar-brand:hover { text-decoration: none; color: var(--color-primary); }
.navbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.navbar nav a:not(.btn) { color: var(--color-text-muted); font-weight: 500; }
.navbar nav a:not(.btn):hover { color: var(--color-primary); }
@media (min-width: 768px) { .navbar { padding-inline: var(--space-8); } }

/* Footer: dark; columns collapse to one on mobile */
.footer { background: var(--color-bg-dark); color: #cbd5e0; margin-top: var(--space-12); }
.footer > div {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: var(--container-xl); margin-inline: auto;
  padding: var(--space-12) var(--space-4);
}
.footer p { margin: 0; }
.footer a { color: #e9d8fd; }
.footer a:hover { color: #fff; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
@media (min-width: 768px) { .footer > div { grid-template-columns: 1fr 2fr; padding-inline: var(--space-8); align-items: start; } }
@media (min-width: 1024px) { .footer > div { grid-template-columns: repeat(4, 1fr); } .footer nav { grid-column: span 3; justify-content: flex-end; } }

/* Forms */
label { display: block; margin-bottom: var(--space-1); font-weight: 600; font-size: var(--text-sm); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select {
  display: block; width: 100%; max-width: 32rem;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.25);
}
input[type="checkbox"], input[type="radio"] { margin-right: var(--space-2); }

/* Alerts. .error / .success are the classes existing pages already put on their messages. */
.alert, .error, .success {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid; border-left-width: 4px; border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.alert-error, .error { color: #742a2a; background: #fff5f5; border-color: var(--color-error); }
.alert-success, .success { color: #22543d; background: #f0fff4; border-color: var(--color-success); }
.alert-info { color: #2a4365; background: #ebf8ff; border-color: var(--color-info); }
ul.error { list-style-position: inside; padding-left: var(--space-4); }

/* Badges (status labels) */
.badge {
  display: inline-block; padding: 0.125rem var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-normal);
  background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.badge-success { background: #f0fff4; color: #22543d; border-color: var(--color-success); }
.badge-warning { background: #fffaf0; color: #7b341e; border-color: var(--color-warning); }
.badge-error { background: #fff5f5; color: #742a2a; border-color: var(--color-error); }
.badge-info { background: #ebf8ff; color: #2a4365; border-color: var(--color-info); }

/* Hero (home page) */
.hero {
  background: linear-gradient(135deg, #f7fafc 0%, #e9d8fd 100%);
  padding: var(--space-12) 0;
  text-align: center;
}
.hero-title {
  font-size: var(--text-4xl);
  font-family: var(--font-serif);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}
.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}
.hero-cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
@media (min-width: 768px) {
  .hero { padding: var(--space-16) 0; }
  .hero-title { font-size: var(--text-5xl); }
}

/* Content helpers used by existing pages */
.post-list { list-style: none; padding: 0; }
.post-list li { margin-bottom: var(--space-6); }
.meta, .rating { color: var(--color-text-muted); font-size: var(--text-sm); }
.rating { color: var(--color-secondary-dark); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.pagination a, .pagination span {
  min-width: 2.25rem; padding: var(--space-1) var(--space-3);
  text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.pagination span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-layout { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .blog-layout { grid-template-columns: 3fr 1fr; } }
main nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
th { font-size: var(--text-sm); color: var(--color-text-muted); }
dt { font-weight: 600; margin-top: var(--space-3); }

/* ===================================================================================
   Phase 2A: content pages (blog, article, services, consultant, pricing) + shared bits
   =================================================================================== */

/* ---- Shared: badge variants, breadcrumb, empty state, spinner, rating ---- */
.badge-primary { background: #faf5ff; color: var(--color-primary-dark); border-color: var(--color-primary-light); }
.badge-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); }
a.badge:hover { text-decoration: none; background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-text-subtle); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

.empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius); }
.empty-state-icon { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
.empty-state h2, .empty-state h3 { margin-top: 0; }

.loading-spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rating { display: inline-flex; gap: 2px; color: var(--color-secondary); letter-spacing: 1px; }
.rating .star-empty { color: var(--color-border); }

/* ---- Pagination ---- */
.pagination-item { min-width: 2.25rem; padding: var(--space-1) var(--space-3); text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pagination-item.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
a.pagination-item:hover { background: var(--color-bg-alt); text-decoration: none; }

/* ---- Blog listing ---- */
.blog-grid { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.blog-grid > li { margin: 0; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } .blog-layout .blog-grid { grid-template-columns: repeat(2, 1fr); } }

.blog-card { display: flex; flex-direction: column; height: 100%; padding: 0 0 var(--space-4); overflow: hidden; }
.blog-card > * { padding-inline: var(--space-4); }
.blog-card > :not(.blog-card-image):first-child, .blog-card-image + * { margin-top: var(--space-4); }
.blog-card .blog-card-image { padding: 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; margin: 0; }
.blog-card-category { margin-bottom: var(--space-2); }
.blog-card-title { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-tight); margin: 0 0 var(--space-2); }
.blog-card-title a, a.blog-card-title { color: var(--color-text); }
.blog-card-title a:hover, a.blog-card-title:hover { color: var(--color-primary); text-decoration: none; }
a.blog-card-title { display: block; }
.blog-card-title, .blog-card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-title { -webkit-line-clamp: 2; line-clamp: 2; }
.blog-card-excerpt { -webkit-line-clamp: 3; line-clamp: 3; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.blog-card-meta { margin: auto 0 0; padding-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.blog-sidebar { padding: var(--space-6); background: var(--color-bg-alt); border-radius: var(--radius); align-self: start; }
.blog-sidebar h2 { margin-top: 0; font-size: var(--text-lg); }
.blog-sidebar ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.blog-sidebar li:last-child { border-bottom: 0; }

/* ---- Article (blog detail): reading column ---- */
main > .article { max-width: 720px; }
.article > h1 { font-family: var(--font-serif); margin-bottom: var(--space-3); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) 0; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.article-meta span + span::before { content: "\00b7"; margin: 0 var(--space-2); }
.article-hero-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-8); }

.article-body { color: var(--color-text); }
.article-body p { font-size: var(--text-lg); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }
.article-body h2 { font-family: var(--font-serif); margin: 2.5rem 0 1rem; }
.article-body h3 { margin: 2rem 0 var(--space-3); }
.article-body blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-2) var(--space-6); margin: var(--space-6) 0; font-style: italic; color: var(--color-text-muted); }
.article-body ul, .article-body ol { padding-left: var(--space-8); margin-bottom: var(--space-6); font-size: var(--text-lg); }
.article-body li { margin-bottom: var(--space-2); }
.article-body a { text-decoration: underline; }
.article-body code { background: var(--color-bg-alt); padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.article-body pre { background: var(--color-bg-dark); color: #e2e8f0; padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; margin-bottom: var(--space-6); }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body img { border-radius: var(--radius); margin: var(--space-6) 0; }
.article-body table { display: block; overflow-x: auto; margin-bottom: var(--space-6); border: 1px solid var(--color-border); }
.article-body th, .article-body td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); }
.article-body tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.article-body hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }

.article-toc { background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
@media (min-width: 1280px) { .article-toc { position: sticky; top: 5rem; } }
.article-disclaimer { background: #ebf8ff; border-left: 4px solid var(--color-info); border-radius: var(--radius); padding: var(--space-4); margin: var(--space-8) 0; color: #2a4365; }
.article-disclaimer p { margin: 0; font-size: var(--text-sm); }
.article-sources { margin-top: var(--space-8); font-size: var(--text-sm); }
.article-sources h2, .article-related h2, .article-author-box h2 { font-size: var(--text-xl); margin-top: 0; }
.article-sources li { word-break: break-word; }
.article-author-box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); margin-top: var(--space-8); }
.article-author-box p { margin-bottom: var(--space-2); }
.article-related { margin-top: var(--space-8); }
.article-related ul { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.article-related li a { display: block; height: 100%; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); font-weight: 600; }
.article-related li a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); text-decoration: none; }
@media (min-width: 768px) { .article-related ul { grid-template-columns: repeat(3, 1fr); } }

/* ---- Services: grid + cards (also /fiyatlandirma) ---- */
.services-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { display: flex; flex-direction: column; }
.service-card-icon { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.service-card-title { font-family: var(--font-serif); font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.service-card-title a { color: var(--color-text); }
.service-card-title a:hover { color: var(--color-primary); text-decoration: none; }
.service-card-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--color-text-muted); }
.service-card-meta { display: flex; justify-content: space-between; gap: var(--space-4); margin: auto 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.service-card-price { font-weight: 700; color: var(--color-primary-dark); font-size: var(--text-base); }
.service-card-cta { align-self: flex-start; }
.service-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: auto 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.service-card dt { margin: 0; font-weight: 400; color: var(--color-text-muted); }
.service-card dd { margin: 0; font-weight: 700; text-align: right; }

/* ---- Service detail: content column + sticky price card ---- */
.service-content { display: grid; gap: var(--space-4) var(--space-8); grid-template-columns: minmax(0, 1fr); align-content: start; }
.service-content > h1 { font-family: var(--font-serif); color: var(--color-primary-dark); margin-bottom: 0; }
.service-hero-cta, .service-bottom-cta { justify-self: start; }
.service-description p { font-size: var(--text-lg); color: var(--color-text-muted); }
.service-facts { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin: 0; box-shadow: var(--shadow); }
.service-facts dt { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.service-facts dt:first-child { margin-top: 0; }
.service-facts dd { font-weight: 700; font-size: var(--text-lg); margin: 0; }
.service-rating { color: var(--color-secondary-dark); font-weight: 600; margin: 0; }
.service-content h2 { margin-top: var(--space-6); }
.service-consultants ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.service-consultants li a { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-weight: 600; }
.service-consultants li a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; text-decoration: none; }
.session-flow ol { counter-reset: step; list-style: none; padding: 0; }
.session-flow li { counter-increment: step; position: relative; padding-left: var(--space-12); margin-bottom: var(--space-4); }
.session-flow li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-weight: 700; text-align: center; line-height: 2rem; }
@media (min-width: 1024px) {
  .service-content { grid-template-columns: minmax(0, 1fr) 20rem; }
  .service-content > * { grid-column: 1; }
  .service-content > .service-facts { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 5rem; align-self: start; }
}

/* ---- FAQ (details-based accordion, and the plain lists that exist today) ---- */
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-3); }
.faq-question { cursor: pointer; padding: var(--space-4); font-weight: 600; list-style-position: outside; }
.faq-item[open] .faq-question { border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.faq-answer { padding: var(--space-4); color: var(--color-text-muted); }
.pricing-faq dt { font-weight: 600; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pricing-faq dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pricing-faq dd { color: var(--color-text-muted); margin: var(--space-1) 0 0; }

/* ---- Consultant profile ---- */
.consultant-page { display: grid; gap: var(--space-2) var(--space-8); grid-template-columns: minmax(0, 1fr); }
.consultant-page > * { grid-column: 1 / -1; }
.consultant-photo { width: 8rem; height: 8rem; border-radius: var(--radius-full); object-fit: cover; border: 4px solid var(--color-bg-alt); box-shadow: var(--shadow-md); margin-bottom: var(--space-2); }
.consultant-page > h1 { font-family: var(--font-serif); color: var(--color-primary-dark); margin-bottom: 0; }
.consultant-title { color: var(--color-text-muted); font-size: var(--text-lg); margin: 0; }
.consultant-cta { justify-self: start; margin: var(--space-3) 0; }
.years-of-experience, .aggregate-rating { color: var(--color-secondary-dark); font-weight: 600; margin: 0; }
.consultant-bio p { font-size: var(--text-lg); color: var(--color-text-muted); }
.consultant-page h2 { margin-top: var(--space-6); }
.consultant-expertise ul, .consultant-services ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consultant-expertise li { padding: 0.125rem var(--space-3); border-radius: var(--radius-full); background: #faf5ff; border: 1px solid var(--color-primary-light); color: var(--color-primary-dark); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-relaxed); margin: 0; }
.consultant-services li a { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-weight: 600; }
.consultant-services li a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; text-decoration: none; }
.consultant-credentials ul { padding-left: var(--space-6); }
.consultant-credentials li { margin-bottom: var(--space-2); }
.consultant-reviews ul { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.review-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.review-card p { margin: var(--space-2) 0; }
.review-rating { color: var(--color-secondary); letter-spacing: 1px; font-size: var(--text-lg); }
.review-card .date { display: block; font-size: var(--text-sm); color: var(--color-text-subtle); }
.consultant-posts ul { padding-left: var(--space-6); }
.consultant-bottom-cta { justify-self: start; margin-top: var(--space-6); }
@media (min-width: 768px) {
  .consultant-photo { width: 12rem; height: 12rem; }
  .consultant-page:has(.consultant-photo) { grid-template-columns: 12rem minmax(0, 1fr); }
  .consultant-page:has(.consultant-photo) > .consultant-photo { grid-column: 1; grid-row: 1 / span 4; }
  .consultant-page:has(.consultant-photo) > :is(h1, .consultant-title, .consultant-cta) { grid-column: 2; }
  .consultant-page:has(.consultant-photo) > h1 { align-self: end; }
}