/* ==================== Genel değişkenler ==================== */
:root{
    /* Section çizgisinin (divider) genişliği */
    --section-w: clamp(120px, 12vw, 220px);
  }
  
  /* ==================== Section #1: Ürün görseli + metin ==================== */
  .bm-hero{ width:min(1200px,96%); margin:36px auto; }
  .bm-hero__in{
    display:grid; grid-template-columns:1.05fr 1fr;
    gap:clamp(20px,4vw,56px); align-items:center;
  }
  .bm-hero__media{ margin:0; }
  .bm-hero__media img{
    width:100%; height:auto; display:block;
    border-radius:8px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.14));
  }
  .bm-hero__text .eyebrow{
    display:block; font:700 12px/1 'Outfit',system-ui,sans-serif;
    letter-spacing:.18em; color:#374151; margin-bottom:10px; text-transform:uppercase;
  }
  .bm-hero__text h1{
    margin:0 0 14px; font-family:'Cormorant Garamond',serif; font-weight:600;
    font-size:clamp(32px,4.6vw,64px); line-height:1.05; color:#1f2937;
  }
  .bm-hero__text p{
    margin:0 0 18px; font-family:'Crimson Text',Georgia,serif;
    font-size:clamp(16px,1.4vw,18px); line-height:1.9; color:#374151;
  }
  .bm-btn{
    display:inline-block; padding:12px 20px; border-radius:8px;
    background:#111; color:#fff; text-decoration:none; font-weight:600;
  }
  .bm-btn:hover{ background:#222; }
  @media (max-width:960px){
    .bm-hero__in{ grid-template-columns:1fr; }
    .bm-hero__media{ order:-1; }              /* mobilde görsel üstte */
    .bm-hero__text h1{ font-size:clamp(28px,6vw,38px); }
  }
  
  /* ==================== Section #2: Arka plan + yarı saydam panel ==================== */
  .bm-info{
    position:relative; width:100%;
    min-height:clamp(320px,48vw,560px);
    background:#000 url("/resource/img/mt-sample-background-1536x1024.jpg") center/cover no-repeat;
    isolation:isolate; margin:36px 0; overflow:hidden;
  }
  @media (min-width:1024px){ .bm-info{ background-attachment:fixed; } }
  .bm-info::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0; }
  
  .bm-info__in{ position:relative; z-index:1; width:min(1200px,96%); margin:clamp(26px,6vw,56px) auto; }
  .bm-info__panel{
    background:rgba(0,0,0,.56); color:#fff; border-radius:18px;
    box-shadow:0 14px 36px rgba(0,0,0,.28);
    padding:clamp(18px,3vw,32px); max-width:1100px;
  }
  .bm-info__panel.is-center{ margin:0 auto; }
  .bm-info__panel.is-left  { margin:0 auto 0 clamp(14px,8vw,220px); }
  .bm-info__panel.is-right { margin:0 clamp(14px,8vw,220px) 0 auto; }
  .bm-info__panel p{
    margin:0 0 14px;
    font:italic 600 clamp(14px,1.5vw,18px)/1.9 Georgia,"Times New Roman",serif;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .bm-info__panel p:last-child{ margin-bottom:0; }
  @media (max-width:900px){ .bm-info__panel{ margin:0 auto !important; } }
  
  /* ==================== Evrensel section ayırıcı (divider) ==================== */
  /* Not: Tek uygulama ==> sadece ::before kullanıldı */
  .has-divider{ position: relative; padding-top: 28px;  border-top: 1px solid rgba(15,23,42,.12);    /* varsayılan çizgi */}
  .has-divider::before{
    content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:var(--section-w); border-top:1px solid rgba(15,23,42,.12);
    pointer-events:none; z-index:3; /* koyu overlay'in üstünde kalsın */
  }
  @media (max-width:720px){ .has-divider{ padding-top:20px; } }
  /* Koyu arka planlı section’larda çizgi rengini aç */
  .bm-info.has-divider::before{ border-top-color:rgba(255,255,255,.28); }
  /* Çizgi istemediğin yerler için */
  .no-divider{ padding-top:0 !important; }
  .no-divider::before{ display:none !important; }
  
  /* ==================== USP v2 – inline SVG ikonlu ==================== */
  .bm-usp2__in{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(32px,4vw,80px); align-items:center; }
  .usp2-product{ margin:0; display:grid; place-items:center; }
  .usp2-product img{
    width:clamp(260px,26vw,420px); height:auto; display:block;
    filter:drop-shadow(0 24px 38px rgba(0,0,0,.18)); border-radius:10px;
  }
  .usp2-col{ list-style:none; padding:0; margin:0; display:grid; gap:clamp(28px,3vw,44px); }
  .usp2-item{ display:grid; justify-items:start; gap:10px; color:#244b36; }
  .usp2-ico{ color:#2f5e44; width:72px; height:72px; display:grid; place-items:center; }
  .usp2-ico svg{ width:100%; height:100%; }
  .usp2-item h3{ margin:0; font-weight:600; font-size:clamp(18px,2.1vw,26px); color:#2f5e44; }
  .usp2-item p{ margin:0; max-width:36ch; font-size:clamp(14px,1.25vw,16px); line-height:1.8; color:#334155; }
  @media (max-width:1024px){
    .bm-usp2__in{ grid-template-columns:1fr; }
    .usp2-item p{ max-width:60ch; }
    .usp2-product img{ width:min(380px,72vw); }
  }
  .visually-hidden{
    position:absolute!important; height:1px; width:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  
  /* ==================== Kolay Kullanım – 3 kart ==================== */
  .bm-how{ text-align:center; }
  .bm-how .lefty{ text-align:left; }
  .bm-how__title{ margin:0 0 14px; font-weight:600; font-size:clamp(18px,2.2vw,22px); color:#111; }
  .bm-how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
  .how-card{
    position:relative; margin:0; border-radius:8px; overflow:hidden;
    background:#4b5563; box-shadow:0 18px 40px rgba(0,0,0,.16);
  }
  .how-card>img{
    width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:16/12;
    filter:saturate(1.05);
  }
  .how-card::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 100% at 20% 10%, rgba(0,0,0,0), rgba(0,0,0,.35));
    pointer-events:none;
  }
  .how-txt{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start;
    padding-left:clamp(6px,1vw,14px); text-align:left;
  }
  .how-txt span{
    color:#fff; font-family:Georgia,"Times New Roman",Times,serif; font-weight:700;
    line-height:1.12; font-size:clamp(18px,2.2vw,32px); text-shadow:0 3px 18px rgba(0,0,0,.45);
  }
  .bm-how__note{ margin:12px 0 0; font-size:clamp(13px,1.2vw,15px); color:#374151; }
  .bm-how__note a{ color:#0f766e; font-weight:700; text-decoration:underline; }
  @media (max-width:980px){
    .bm-how__grid{ grid-template-columns:1fr; }
    .how-txt{ justify-content:center; padding-left:0; text-align:center; }
  }
  
  /* ==================== Slider altı video + metin ==================== */
  .bm-feature{ width:min(1200px,96%); margin:36px auto 24px; }
  .bm-feature__in{
    display:grid; grid-template-columns:1.1fr 1fr;
    gap:clamp(16px,3vw,40px); align-items:center;
  }
  .bm-video{ position:relative; border-radius:14px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.14); }
  .bm-video::before{ content:""; display:block; aspect-ratio:16/9; }
  .bm-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .bm-feature__text h2{ margin:0 0 6px; font-weight:800; font-size:clamp(24px,3vw,40px); }
  .bm-feature__text h3{ margin:0 0 14px; font-weight:600; font-size:clamp(18px,2.4vw,28px); }
  .bm-feature__text p{ margin:0; font-size:clamp(14px,1.4vw,18px); line-height:1.7; color:#222; }
  @media (max-width:960px){ .bm-feature__in{ grid-template-columns:1fr; } }

  /* ==== Slider altı – Mumiyo Faydaları ==== */
.bm-benefits{ width:min(1200px,96%); margin:36px auto 24px; }
.bm-benefits__in{ display:grid; grid-template-columns: 1.1fr 1fr; gap:clamp(16px,3vw,40px); align-items:start; }
.bm-benefits__media{ margin:0; border-radius:14px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.12); background:#e5e7eb; }
.bm-benefits__media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/8; }
.bm-benefits__text h2{ margin:0 0 12px; font-weight:800; font-size:clamp(22px,3vw,34px); }
.bm-benefits__text p{ margin:0 0 12px; font-size:clamp(14px,1.4vw,18px); line-height:1.75; color:#1f2937; }
.bm-benefits__text p strong{ font-weight:700; color:#111827; }
@media (max-width: 960px){ .bm-benefits__in{ grid-template-columns: 1fr; } }
/* hizalama düzeltmesi */
.bm-benefits__text{ align-self:start; display:grid; gap:14px; margin:0!important; padding:0!important; }
.bm-benefits__text h2,.bm-benefits__text h3,.bm-benefits__text p{ margin:0!important; }
.bm-benefits__text h2{ margin-bottom:6px!important; }