/* ==========================================================================
   Vefa Medikal — Sayfaya özgü düzenler
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grup sayfası: filtre + ızgara
   -------------------------------------------------------------------------- */
.catalog { display: grid; grid-template-columns: 246px 1fr; gap: 46px; align-items: start; }
.catalog-aside { position: sticky; top: 100px; }
@media (max-width: 991px) {
    .catalog { grid-template-columns: 1fr; gap: 30px; }
    .catalog-aside { position: static; }
    .filter-list { flex-direction: row; flex-wrap: wrap; }
    .filter-chip { border-left: none; border-bottom: 3px solid transparent; }
    .filter-chip.is-active { border-left: none; border-bottom-color: var(--accent); }
}

.result-bar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.result-bar .result-count { font-family: var(--font-data); font-size: var(--fs-small); color: var(--muted); }

/* --------------------------------------------------------------------------
   Ürün detayı
   -------------------------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 991px) { .product-detail { grid-template-columns: 1fr; gap: 32px; } }

.gallery-main {
    background: linear-gradient(160deg, #FBFCFD, #E7EDF4);
    display: flex; align-items: center; justify-content: center;
    min-height: 420px; padding: 40px; overflow: hidden;
}
.gallery-main img { max-height: 360px; max-width: 100%; object-fit: contain; }
.gallery-main .bi { font-size: 60px; color: #B6C3D2; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.gallery-thumbs button {
    width: 68px; height: 68px; padding: 6px; background: var(--surface);
    border: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s var(--ease);
}
.gallery-thumbs button:hover { border-color: var(--muted); }
.gallery-thumbs button.is-active { border-color: var(--accent); border-width: 2px; }
.gallery-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-detail .detail-brand {
    font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.product-detail h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 18px; }
.product-detail .detail-desc { color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
@media (max-width: 560px) { .detail-actions { flex-direction: column; align-items: stretch; }
    .detail-actions > * { justify-content: center; } }

.spec-table th, .spec-table td {
    padding: 13px 0; border-bottom: 1px solid var(--line);
    font-size: var(--fs-small); text-align: left; vertical-align: top;
}
.spec-table th { color: var(--muted); font-weight: 400; width: 46%; }
.spec-table td { color: var(--ink); font-weight: 500; font-family: var(--font-data); }

/* --------------------------------------------------------------------------
   İletişim
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 991px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; } }
.contact-panel { background: var(--navy); color: #fff; padding: 38px 34px; position: relative; overflow: hidden; }
.contact-panel .info-block { margin-bottom: 26px; position: relative; z-index: 2; }
.contact-panel .info-block:last-child { margin-bottom: 0; }
.contact-panel .info-label {
    font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi);
    display: block; margin-bottom: 7px;
}
.contact-panel p { color: #D6E0EE; font-size: var(--fs-small); line-height: 1.7; }
.contact-panel a { color: #D6E0EE; }
.contact-panel a:hover { color: #fff; }
.map-frame { margin-top: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.map-frame iframe { width: 100%; height: 300px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   Blog ve statik sayfa
   -------------------------------------------------------------------------- */
.article-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    border-radius: var(--radius);
}
.article-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(14,23,38,.10); }
.article-card .thumb { height: 200px; overflow: hidden; background: var(--paper); }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card .card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.article-card h3 { font-size: 1.2rem; line-height: 1.15; margin-bottom: 10px; }
.article-card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.6; margin-bottom: 14px; flex: 1 1 auto; }
.article-date {
    font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: .1em;
    color: var(--accent-ink); display: block; margin-bottom: 9px;
}

.prose { max-width: 760px; font-size: 1rem; line-height: 1.85; color: #33404F; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.7rem; margin-top: 2em; color: var(--ink); }
.prose h3 { font-size: 1.32rem; margin-top: 1.7em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose img { margin-block: 1.6em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Teklif modalı (Bootstrap üzerine)
   -------------------------------------------------------------------------- */
.quote-modal .modal-content { border: none; border-radius: var(--radius); overflow: hidden; }
.quote-modal .modal-header {
    background: var(--navy); color: #fff; border: none; padding: 20px 26px;
}
.quote-modal .modal-title {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    font-size: 1.4rem; letter-spacing: .02em;
}
.quote-modal .modal-body { padding: 26px; }
.quote-modal .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .quote-modal .field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Yardımcılar
   -------------------------------------------------------------------------- */
.stack-lg > * + * { margin-top: 26px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.media-frame { overflow: hidden; background: var(--paper); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }