/* ==========================================================================
   Bimarj — yerleşim geriye dönük uyumluluk katmanı
   CSS Grid desteklemeyen tarayıcılar (eski WebKit, IE11) flexbox ile
   düzgün bir yerleşim alır. Modern tarayıcılar @supports bloğuyla
   grid'e geçer. Bu dosya home.css ve components.css'ten SONRA yüklenir.
   ========================================================================== */

/* ---- 1. Flex fallback (tüm tarayıcılar) ---- */
.hero-grid, .feature-grid, .tool-grid, .post-grid, .footer-grid, .mp-grid, .mp-logos,
.carrier-grid, .calc-grid, .tool-layout, .stat-grid, .result-highlight,
.field-row, .field-row-3, .field-row-4, .preview-grid, .preview-metrics,
.admin-form-row, .choice-group, .link-list, .tool-side {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: calc(var(--sp-4) / -2);
  margin-right: calc(var(--sp-4) / -2);
}
.hero-grid > *, .feature-grid > *, .tool-grid > *, .post-grid > *, .footer-grid > *,
.mp-grid > *, .carrier-grid > *, .calc-grid > *, .tool-layout > *, .stat-grid > *,
.result-highlight > *, .field-row > *, .field-row-3 > *, .field-row-4 > *,
.preview-grid > *, .preview-metrics > *, .admin-form-row > *, .choice-group > *,
.link-list > *, .tool-side > * {
  margin: calc(var(--sp-4) / 2);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.hero-grid > *      { width: calc(50%    - var(--sp-4)); }
.feature-grid > *   { width: calc(16.66% - var(--sp-4)); }
.tool-grid > *      { width: calc(25%    - var(--sp-4)); }
.post-grid > *      { width: calc(25%    - var(--sp-4)); }
.footer-grid > *    { width: calc(25%    - var(--sp-4)); }
.mp-grid > *        { width: calc(33.33% - var(--sp-4)); }
.mp-logos > *       { width: calc(25%    - var(--sp-4)); }
.carrier-grid > *   { width: calc(50%    - var(--sp-4)); }
.calc-grid > *      { width: calc(50%    - var(--sp-4)); }
.stat-grid > *      { width: calc(25%    - var(--sp-4)); }
.result-highlight > *{ width: calc(50%   - var(--sp-4)); }
.field-row > *      { width: calc(50%    - var(--sp-4)); }
.field-row-3 > *    { width: calc(33.33% - var(--sp-4)); }
.field-row-4 > *    { width: calc(25%    - var(--sp-4)); }
.preview-grid > *   { width: calc(50%    - var(--sp-4)); }
.preview-metrics > *{ width: calc(50%    - var(--sp-4)); }
.admin-form-row > * { width: calc(50%    - var(--sp-4)); }
.choice-group > *, .link-list > *, .tool-side > * { width: 100%; }
.tool-layout > .tool-main { width: calc(70% - var(--sp-4)); }
.tool-layout > .tool-side { width: calc(30% - var(--sp-4)); }
.result-highlight { margin: 0; }
.result-highlight > * { margin: 0; width: 50%; border-right: 1px solid var(--color-border); }
.result-highlight > *:last-child { border-right: 0; }

@media (max-width: 1024px) {
  .hero-grid > *, .tool-grid > *, .post-grid > *, .footer-grid > * { width: calc(50% - var(--sp-4)); }
  .feature-grid > * { width: calc(33.33% - var(--sp-4)); }
  .mp-grid > *      { width: calc(50% - var(--sp-4)); }
  .tool-layout > .tool-main, .tool-layout > .tool-side { width: calc(100% - var(--sp-4)); }
}
@media (max-width: 768px) {
  .calc-grid > *, .carrier-grid > *, .field-row > *, .field-row-3 > *,
  .admin-form-row > *, .mp-grid > *, .preview-grid > * { width: calc(100% - var(--sp-4)); }
  .field-row-4 > * { width: calc(50% - var(--sp-4)); }
}
@media (max-width: 640px) {
  .feature-grid > * { width: calc(50% - var(--sp-4)); }
  .tool-grid > *, .post-grid > *, .footer-grid > *, .hero-grid > *, .stat-grid > * {
    width: calc(100% - var(--sp-4));
  }
  .result-highlight > * { width: 100%; border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* ---- 2. Modern tarayıcılar: grid'e geri dön ---- */
@supports (display: grid) {
  .hero-grid, .feature-grid, .tool-grid, .post-grid, .footer-grid, .mp-grid, .mp-logos,
  .carrier-grid, .calc-grid, .tool-layout, .stat-grid, .result-highlight,
  .field-row, .field-row-3, .field-row-4, .preview-grid, .preview-metrics,
  .admin-form-row, .choice-group, .link-list, .tool-side {
    display: grid;
    margin-left: 0; margin-right: 0;
  }
  .hero-grid > *, .feature-grid > *, .tool-grid > *, .post-grid > *, .footer-grid > *,
  .mp-grid > *, .carrier-grid > *, .calc-grid > *, .tool-layout > *, .stat-grid > *,
  .result-highlight > *, .field-row > *, .field-row-3 > *, .field-row-4 > *,
  .preview-grid > *, .preview-metrics > *, .admin-form-row > *, .choice-group > *,
  .link-list > *, .tool-side > * {
    width: auto; margin: 0;
  }
  .result-highlight > * { border-right: 0; border-bottom: 0; }

  .hero-grid        { grid-template-columns: 1fr 1.1fr; gap: var(--sp-10); }
  .mp-logos         { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
  .feature-grid     { grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
  .tool-grid        { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .post-grid        { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .footer-grid      { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: var(--sp-8); }
  .mp-grid          { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .carrier-grid     { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .calc-grid        { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .tool-layout      { grid-template-columns: 1fr 300px; gap: var(--sp-8); }
  .stat-grid        { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
  .result-highlight { grid-template-columns: 1fr 1fr; gap: 1px; }
  .field-row        { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .field-row-3      { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .field-row-4      { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .preview-grid     { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .preview-metrics  { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .admin-form-row   { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .choice-group     { gap: var(--sp-3); }
  .link-list        { gap: var(--sp-2); }
  .tool-side        { gap: var(--sp-4); }

  @media (max-width: 1024px) {
    .hero-grid, .tool-layout { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
    .tool-grid, .post-grid, .footer-grid, .mp-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .calc-grid, .carrier-grid, .field-row, .field-row-3, .admin-form-row, .mp-grid { grid-template-columns: 1fr; }
    .field-row-4 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-grid, .post-grid, .footer-grid, .preview-grid, .result-highlight { grid-template-columns: 1fr; }
  }
}

/* ---- 3. flex `gap` fallback (eski WebKit gap desteklemez) ---- */
.main-nav > a          { margin-right: var(--sp-5); }
.header-actions > *    { margin-left: var(--sp-3); }
.brand > *             { margin-right: var(--sp-2); }
.trust-row > *         { margin-right: var(--sp-6); margin-bottom: var(--sp-3); }
.trust-item > *        { margin-right: var(--sp-3); }
.mp-logos > *          { margin-right: var(--sp-3); margin-bottom: var(--sp-3); }
.cost-legend > li      { margin-right: var(--sp-5); margin-bottom: var(--sp-2); }
.cost-legend i         { margin-right: var(--sp-2); }
.footer-bottom > nav a { margin-left: var(--sp-4); }
.breadcrumb > li       { margin-right: var(--sp-2); }
.newsletter > *        { margin-right: var(--sp-2); }
.search-page-form > *  { margin-right: var(--sp-3); }
.btn > svg             { margin-left: var(--sp-2); }
.choice > input        { margin-right: var(--sp-3); }
.result-row > span:first-child { margin-right: var(--sp-4); }
.cta-band > *          { margin-right: var(--sp-6); }
.tool-card > *         { margin-right: var(--sp-3); }
.tool-head > *         { margin-right: var(--sp-4); }
.alert > *             { margin-right: var(--sp-3); }
.admin-topbar > *      { margin-right: var(--sp-4); }
.admin-topbar form > * { margin-right: var(--sp-3); }
.mp-card-head > *      { margin-right: var(--sp-3); }
.preview-head > *      { margin-right: var(--sp-3); }
.preview-title > *     { margin-right: var(--sp-2); }
.site-search > *       { margin-right: var(--sp-2); }
.social-row > *        { margin-right: var(--sp-2); }
.post-meta > span > svg { margin-right: 4px; }
.cta-band > *          { margin-right: var(--sp-6); }
.trust-item > *        { margin-right: var(--sp-3); }
.header-cta > svg      { margin-right: var(--sp-2); }

@supports (gap: 1px) and (display: flex) {
  .main-nav > a, .header-actions > *, .brand > *, .trust-row > *, .trust-item > *,
  .mp-logos > *, .cost-legend > li, .cost-legend i, .footer-bottom > nav a,
  .breadcrumb > li, .newsletter > *, .search-page-form > *, .btn > svg,
  .choice > input, .result-row > span:first-child, .cta-band > *, .tool-card > *,
  .tool-head > *, .alert > *, .admin-topbar > *, .admin-topbar form > *,
  .mp-card-head > *, .preview-head > *, .preview-title > *, .site-search > * {
    margin-right: 0; margin-left: 0; margin-bottom: 0;
  }
  .choice > input { margin-top: 3px; }
}