/* =====================================================================
   REKA AGRO — İç Sayfa Bileşenleri (Bootstrap 5 uyumlu)
   Kurumsal (sol menü) · Ürünler · Ürün Detay · İletişim
   Grid Bootstrap ile; burada yalnızca marka görünümü tanımlanır.
   ===================================================================== */

/* ─── SAYFA BANNER (Başlık + Breadcrumb) ────────────────────────────── */
.page-banner {
    position: relative; isolation: isolate; overflow: hidden;
    color: #fff; padding: 88px 0 78px; display: flex; align-items: center;
}
.page-banner__media {
    position: absolute; inset: -4%; z-index: -2;
    background-color: var(--c-deep);
    background-image: url("../images/hero-bg.jpg");
    background-size: cover; background-position: center 38%;
}
.page-banner__overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, rgba(13,56,16,.92) 0%, rgba(22,80,28,.82) 55%, rgba(10,40,12,.90) 100%);
}
.page-banner__overlay::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px;
}
.page-banner__inner { position: relative; z-index: 1; text-align: center; }
.page-banner h1 { color: #fff; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.4px; margin-bottom: 14px; }
.page-banner p { color: rgba(255,255,255,.86); max-width: 620px; font-size: 1.05rem; margin-left: auto; margin-right: auto; }
.page-banner .crumbs { justify-content: center; }

/* Breadcrumb */
.crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: var(--ff-head); font-weight: 500; font-size: .82rem; letter-spacing: .4px;
    color: rgba(255,255,255,.72); margin-bottom: 18px;
}
.crumbs a { color: var(--c3); transition: color var(--t); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: #fff; }
.crumbs .sep { opacity: .55; font-size: .7rem; display: inline-flex; }

/* Genel iç sayfa bölüm sarmalı */
.section { padding: 88px 0; }
.section--pale { background: var(--c-pale2); }
.section--tight { padding: 64px 0; }

/* ─── KURUMSAL — SOL MENÜLÜ DÜZEN ───────────────────────────────────── */
.kv { padding: 76px 0 92px; background: var(--white); }

.side { position: sticky; top: calc(var(--header-h) + 24px); }
.side__card { background: var(--c-pale2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.side__title { font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem; color: #fff; background: var(--c1); padding: 18px 22px; }
.side__menu { padding: 8px; }
.side__menu li { border-radius: 8px; }
.side__menu a {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    font-family: var(--ff-head); font-weight: 500; font-size: .95rem; color: var(--body); border-radius: 8px;
    transition: background var(--t), color var(--t), padding var(--t);
}
.side__menu a i { font-size: .75rem; color: var(--c3); transition: color var(--t), transform var(--t); }
.side__menu a:hover { background: var(--white); color: var(--c-dark); padding-left: 20px; }
.side__menu a:hover i { color: var(--c1); }
.side__menu a.is-active { background: var(--white); color: var(--c1); font-weight: 600; box-shadow: var(--shadow-xs); }
.side__menu a.is-active i { color: var(--c1); transform: translateX(2px); }

.side__cta {
    margin-top: 20px; background: linear-gradient(150deg, var(--c-dark), var(--c1));
    border-radius: var(--radius-lg); padding: 26px 24px; color: #fff; text-align: center; box-shadow: var(--shadow);
}
.side__cta h4 { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.side__cta p { color: rgba(255,255,255,.82); font-size: .9rem; margin-bottom: 18px; }
.side__cta .btn { background: #fff; color: var(--c-dark); width: 100%; }
.side__cta .btn:hover { background: var(--c3); color: var(--c-dark); }

/* İçerik (prose) */
.doc > * + * { margin-top: 18px; }
.doc .kv__block { scroll-margin-top: calc(var(--header-h) + 24px); }
.doc .kv__block + .kv__block { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.doc h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.3px; margin-bottom: 6px; }
.doc h3 { font-size: 1.2rem; margin-bottom: 4px; color: var(--c-dark); }
.doc p { color: var(--body); }
.doc .lead { font-size: 1.12rem; color: var(--ink); }
.doc ul.ticks { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.doc ul.ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 500; }
.doc ul.ticks li span {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 2px;
    border-radius: 50%; background: var(--c1); color: #fff; font-size: .74rem;
}
.doc .figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 8; background: var(--c-pale); }
.doc .figure img { width: 100%; height: 100%; object-fit: cover; }

/* Vizyon / Misyon kartları */
.vm-card { height: 100%; background: var(--c-pale2); border: 1px solid var(--line); border-top: 3px solid var(--c1); border-radius: var(--radius); padding: 30px 26px; }
.vm-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--c1); margin-bottom: 18px; color: #fff; font-size: 1.4rem; }
.vm-card h3 { font-size: 1.18rem; margin-bottom: 8px; }

/* Değer / mini kart */
.mini-card { height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--c2); }
.mini-card strong { display: block; font-family: var(--ff-head); color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
.mini-card p { font-size: .92rem; }

/* Sertifika rozetleri */
.certs { display: flex; flex-wrap: wrap; gap: 14px; }
.cert-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--c-pale); border: 1px solid var(--line); border-radius: 40px; padding: 10px 20px;
    font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--c-dark);
}
.cert-badge i { font-size: 1.1rem; color: var(--c1); }

/* ─── ÜRÜNLER SAYFASI ───────────────────────────────────────────────── */
.prod-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.prod-filter button {
    font-family: var(--ff-head); font-weight: 600; font-size: .9rem; padding: 10px 22px; border-radius: 40px;
    background: var(--white); color: var(--body); border: 1.5px solid var(--line); transition: all var(--t);
}
.prod-filter button:hover { border-color: var(--c2); color: var(--c-dark); }
.prod-filter button.is-active { background: var(--c1); color: #fff; border-color: var(--c1); box-shadow: 0 6px 18px rgba(56,180,62,.30); }

.product-card__more {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    font-family: var(--ff-head); font-weight: 600; font-size: .88rem; color: var(--c1);
}
.product-card__more i { font-size: .95rem; transition: transform var(--t); }
.product-card:hover .product-card__more i { transform: translateX(4px); }

/* ─── ÜRÜN DETAY ────────────────────────────────────────────────────── */
.pd { padding: 76px 0 40px; background: var(--white); }
.pd__gallery { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; aspect-ratio: 4 / 3; background: var(--c-pale); }
.pd__gallery img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb {
    width: 100%; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-pale);
    border: 2px solid transparent; cursor: pointer; padding: 0; transition: border-color var(--t);
}
.pd__thumb.is-active, .pd__thumb:hover { border-color: var(--c1); }
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd__info .product-card__tag { margin-bottom: 14px; }
.pd__info h1, .pd__info h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; letter-spacing: -.4px; }
.pd__info .lead { font-size: 1.1rem; color: var(--body); margin-bottom: 24px; }

.pd__specs { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 6px 0 28px; }
.pd__specs th, .pd__specs td { padding: 13px 18px; text-align: left; font-size: .94rem; }
.pd__specs tr:nth-child(odd) { background: var(--c-pale2); }
.pd__specs th { font-family: var(--ff-head); color: var(--ink); font-weight: 600; width: 45%; }
.pd__specs td { color: var(--body); }

.pd__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Ürün sekmeleri */
.pd-tabs { margin-top: 8px; }
.pd-tabs__nav { display: flex; gap: 6px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.pd-tabs__nav button {
    font-family: var(--ff-head); font-weight: 600; font-size: .95rem; padding: 14px 22px; color: var(--body);
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color var(--t), border-color var(--t);
}
.pd-tabs__nav button:hover { color: var(--c-dark); }
.pd-tabs__nav button.is-active { color: var(--c1); border-color: var(--c1); }
.pd-tabs__panel { display: none; padding: 30px 0; }
.pd-tabs__panel.is-active { display: block; }
.pd-tabs__panel > * + * { margin-top: 14px; }
.pd-tabs__panel h3 { color: var(--c-dark); font-size: 1.15rem; }
.pd-tabs__panel ul.ticks { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.pd-tabs__panel ul.ticks li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); }
.pd-tabs__panel ul.ticks li span {
    display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 2px;
    border-radius: 50%; background: var(--c1); color: #fff; font-size: .7rem;
}

/* İlgili ürünler */
.related { padding: 40px 0 92px; background: var(--white); }

/* ─── İLETİŞİM HARİTA ───────────────────────────────────────────────── */
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 380px; background: var(--c-pale); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .side { position: static; }
}
@media (max-width: 767.98px) {
    .kv, .pd, .related, .section { padding-top: 56px; padding-bottom: 56px; }
    .page-banner { padding: 64px 0 56px; }
}