belizsamliart.com

Footer Links

links

Title

Sub Links

Image List

Link

Image

Cookie 

Cookie Content

Cookie Button Text

Show Cookie Bar

DescriptionPosition

discountPosition

Ikas Logo

Aspect Ratio

Object Fit

Konumunuza özel içerikleri görmek ve online alışveriş yapmak için               başka bir ülkeyi veya bölgeyi seçin.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BLOOMGUIN – Hero (Scoped, Mobile Centered)</title>

<style>
  /* === Scoped to this hero only === */
  #bgh-hero{
    --hs-w:1200px; --hs-h:512px; --hs-r:18px; --hs-pad:28px;
    --tint: rgba(180, 245, 227, .25);
    --vignette: rgba(0,0,0,.10);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  }

  #bgh-hero .hs-shell{position:relative;width:var(--hs-w);margin:56px auto 0}

  /* Top menu (pill) */
  #bgh-hero .hs-topbar{
    position:absolute; top:-26px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:999px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    backdrop-filter:saturate(1.1) blur(2px); -webkit-backdrop-filter:saturate(1.1) blur(2px);
    z-index:10;
  }
  #bgh-hero .hs-topbar a{
    text-decoration:none; color:#111827; font-weight:700; font-size:14px; line-height:1;
    padding:10px 14px; border-radius:999px; white-space:nowrap;
    transition:transform .15s, background-color .15s, color .15s;
  }
  #bgh-hero .hs-topbar a:hover{background:rgba(17,24,39,.06); transform:translateY(-1px)}
  #bgh-hero .hs-topbar a.is-primary{background:#111827;color:#fff}

  /* Slider */
  #bgh-hero #hs-slider{
    position:relative; display:block; width:var(--hs-w); height:var(--hs-h);
    margin:0 auto; border-radius:var(--hs-r); overflow:hidden;
  }
  #bgh-hero .hs-track{display:flex;height:100%}
  #bgh-hero .hs-slide{position:relative;min-width:100%;height:100%}

  /* Background */
  #bgh-hero .hs-bg{
    position:absolute; inset:0;
    background-image:url("https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/07a971ff-385b-42e4-a4d6-e14c3c581c2b/image_1080.webp");
    background-size:cover; background-position:center;
  }
  #bgh-hero .hs-bg::before{content:""; position:absolute; inset:0; background:var(--tint); pointer-events:none;}
  #bgh-hero .hs-bg::after{content:""; position:absolute; inset:-10%;
    background:radial-gradient(110% 110% at 50% 65%, transparent 55%, var(--vignette) 100%); pointer-events:none;}

  #bgh-hero .hs-content{
    position:relative; z-index:1; height:100%; padding:var(--hs-pad);
    display:flex; justify-content:space-between; align-items:center; gap:18px;
  }

  /* Right glass card */
  #bgh-hero .hs-right{position:relative; display:flex; align-items:flex-end; justify-content:flex-end; flex:1; z-index:3}
  #bgh-hero .hs-card{
    position:relative; display:block; color:#1f2937; width:180px; padding:12px; border-radius:16px;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55);
    backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
    transition:transform .3s ease; margin:0 10px 10px 0; text-decoration:none;
  }
  #bgh-hero .hs-card:hover{transform:translateY(-4px) scale(1.03)}
  #bgh-hero .hs-ptitle{color:#1f2937; font-size:14px; font-weight:800; line-height:1.1; margin:2px 26px 8px 2px}
  #bgh-hero .hs-watermark{margin-top:8px; font-size:11px; font-weight:700; opacity:.9; color:#1f2937}
  #bgh-hero .hs-diag{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06); transition:transform .25s ease}
  #bgh-hero .hs-card:hover .hs-diag{transform:translateY(-2px) translateX(2px) rotate(-8deg)}
  #bgh-hero .hs-diag svg{width:13px; height:13px}
  #bgh-hero .hs-diag path{stroke:#1f2937; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
  #bgh-hero .hs-media{width:100%; aspect-ratio:1/1; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(10px); overflow:hidden}
  #bgh-hero .hs-media img{width:84%; height:84%; object-fit:contain; border-radius:10px; display:block}

  /* ===== Responsive ===== */
  @media (max-width:1200px){
    #bgh-hero{--hs-w:90vw; --hs-h:calc(var(--hs-w) * 0.427)}
    #bgh-hero .hs-shell{width:var(--hs-w)}
    #bgh-hero #hs-slider{width:var(--hs-w); height:var(--hs-h)}
  }
  @media (min-width:769px){
    #bgh-hero .hs-content{align-items:stretch}
    #bgh-hero .hs-right{margin-top:auto; padding-bottom:26px}
  }

  /* ===== Mobile ≤768px ===== */
  @media (max-width:768px){
    /* Center correctly; remove extra space above hero */
    #bgh-hero{--hs-w:100vw}
    #bgh-hero .hs-shell{width:100%; margin-top:18px}
    #bgh-hero #hs-slider{
      width:100%; max-width:100%; height:auto; aspect-ratio:1200/512; border-radius:0;
      margin:0 auto;
    }

    /* Topbar: a bit smaller & higher */
    #bgh-hero .hs-topbar{
      top:-16px;
      padding:3px 5px; gap:4px;
      max-width:calc(100vw - 20px);
      overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    #bgh-hero .hs-topbar a{font-size:9.5px; padding:4px 6px}

    /* Right card: keep small & low */
    #bgh-hero .hs-content{padding:8px}
    #bgh-hero .hs-right{padding-bottom:0; transform:translateY(10px)}
    #bgh-hero .hs-card{width:min(22vw, 86px); padding:4px; border-radius:8px; margin:0 6px 4px 0}
    #bgh-hero .hs-ptitle{font-size:9.5px; margin:2px 10px 4px 2px}
    #bgh-hero .hs-diag{top:4px; right:4px; width:11px; height:11px}
    #bgh-hero .hs-diag svg{width:6px; height:6px}
    #bgh-hero .hs-media img{width:60%; height:60%}
  }
</style>

<section id="bgh-hero" aria-label="Bloomguin Hero">
  <div class="hs-shell">
    <nav class="hs-topbar" aria-label="Üst Menü">
      
      <a class="is-primary" href="https://belizsamliart.com/bloomguin" aria-label="Bloomguin">Bloomguin</a>
      <a href="https://belizsamliart.com/pages/katman-serisi" aria-label="Katman Serisi">Katman Serisi</a>
      <a href="https://belizsamliart.com/pages/sari-lacivert-koleksiyonu" aria-label="Sarı-Lacivert Koleksiyonu">Sarı-Lacivert Koleksiyonu</a>
      
      <a href="https://belizsamliart.com/pages/hakkimda" aria-label="Hakkımda">Hakkımda</a>
    </nav>

    <div id="hs-slider" aria-label="BLOOMGUIN Hero">
      <div class="hs-track">
        <section class="hs-slide" aria-label="1 / 1">
          <div class="hs-bg" aria-hidden="true"></div>
          <div class="hs-content">
            <div class="hs-right">
              <a class="hs-card" href="https://belizsamliart.ikas.shop/tiffanny-blue-bloomguin" aria-label="Tiffanny Blue Bloomguin">
                <div class="hs-diag" aria-hidden="true">
                  <svg viewBox="0 0 24 24"><path d="M7 17 17 7M9 7h8v8"></path></svg>
                </div>
                <div class="hs-ptitle">İncele</div>
                <div class="hs-media">
                  <img src="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/8d491103-3319-4f71-a81b-7d5c3a700f12/image_1080.webp" alt="Kart görseli">
                </div>
                <div class="hs-watermark">Bloomguin</div>
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

<style>
  /* === Scoped only to this grid === */
  #bgh-grid{
    --grid-w: 1200px;
    --gap: 16px;
    --pad: 12px;
    --img-scale: .92;
    --img-scale-hover: .98;
    margin-top: 0; /* slider'a yapışık başla (desktop) */
  }

  #bgh-grid .model-grid{
    width: min(var(--grid-w), 95vw);
    margin: 10px auto 24px; /* üstte makul boşluk (desktop) */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }

  #bgh-grid .model-card{
    position: relative;
    border: 0;
    background: transparent;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: transform .18s ease;
  }

  #bgh-grid .model-card img{
    max-width: calc(100% - 2 * var(--pad));
    max-height: calc(100% - 2 * var(--pad));
    width: auto; height: auto;
    object-fit: contain;
    display: block;
    transform: scale(var(--img-scale));
    filter: brightness(1) contrast(1);
    transition: transform .25s ease, filter .25s ease;
    will-change: transform;
  }

  #bgh-grid .model-card:hover img,
  #bgh-grid .model-card:focus-visible img{
    transform: scale(var(--img-scale-hover));
    filter: brightness(1.02) contrast(1.03);
  }

  #bgh-grid .model-card:focus-visible{
    outline: 3px solid rgba(15,110,210,.6);
    outline-offset: 4px;
  }

  /* === Mobile ≤768px: slider'a daha da yaklaş === */
  @media (max-width:768px){
    #bgh-grid{
      /* Neden: Üstteki slider’ın alt padding/margin’ini telafi etmek için çekiyoruz */
      margin-top: -12px; /* gerekirse -8 ~ -20px arası deneyebilirsin */
    }

    #bgh-grid .model-grid{
      margin-top: 0;     /* grid üst marjını kaldır */
      width: min(var(--grid-w), 96vw);
      gap: 12px;
    }

    #bgh-grid .model-card{ aspect-ratio: 3 / 4; }
    #bgh-grid .model-card img{ transform: scale(.9); }
  }
</style>

<section id="bgh-grid" aria-label="Bloomguin modelleri">
  <div class="model-grid">
    <a class="model-card" href="https://belizsamliart.com/bloomguin-yellow?Boyut=21-x-25cm" aria-label="Bloomguin Yellow 21×25 cm">
      <img src="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/f91964c2-720e-41b3-8ba6-c6e3ee91bd96/image_1080.webp" alt="Model 1">
    </a>
    <a class="model-card" href="https://belizsamliart.com/bloomguin-blue?Boyut=21-x-25cm" aria-label="Bloomguin Blue 21×25 cm">
      <img src="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/52235c6c-33d4-4bed-8a8b-a51aecf8cca2/image_1080.webp" alt="Model 2">
    </a>
    <a class="model-card" href="https://belizsamliart.com/bloomguin-pink?Boyut=21-x-25cm" aria-label="Bloomguin Pink 21×25 cm">
      <img src="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/e05a7bdc-bf97-41cd-b1a2-0a79f5ebd541/image_1080.webp" alt="Model 3">
    </a>
    <a class="model-card" href="https://belizsamliart.com/bloomguin-red?Boyut=21-x-25cm" aria-label="Bloomguin Red 21×25 cm">
      <img src="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/3ed6982b-531d-43a5-949f-889e3ec46f5c/image_1080.webp" alt="Model 4">
    </a>
  </div>
</section>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&amp;display=swap" rel="stylesheet">

<style>
  /* Yalnızca bu bileşeni etkiler */
  #ccx-gallery{
    --card-bg:rgba(255,255,255,.18);
    --text:#ffffff;
    --shadow:0 20px 30px rgba(0,0,0,.12);
    --radius:28px;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  }
  #ccx-gallery .ccx-wrap{
    display:grid; place-items:center; padding:32px;
    background:#E8F4F9; /* İstenen arka plan rengi */
  }
  #ccx-gallery .ccx-container{
    width:min(1200px, 100%);
    display:flex; gap:24px; flex-wrap:wrap; align-items:stretch; justify-content:center;
  }
  #ccx-gallery .ccx-card{
    position:relative; flex:1 1 520px; min-width:520px; max-width:580px; height:280px;
    border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
    isolation:isolate; background:var(--card-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  #ccx-gallery .ccx-card:hover{ transform: translateY(-6px); box-shadow:0 28px 40px rgba(0,0,0,.16) }
  #ccx-gallery .ccx-bg{
    position:absolute; inset:0; background-size:cover; background-position:center;
    transform:scale(1.02); transition:transform .6s ease; z-index:-2;
  }
  #ccx-gallery .ccx-card:hover .ccx-bg{ transform:scale(1.08) }
  #ccx-gallery .ccx-shade{ position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,.35));
    z-index:-1;
  }
  #ccx-gallery .ccx-content{
    position:relative; height:100%;
    display:grid; grid-template-rows:1fr auto; padding:28px; color:var(--text);
    z-index:2; pointer-events:none; /* Neden: tüm tıklamalar karta gitsin */
  }
  #ccx-gallery .ccx-topline{ display:flex; justify-content:space-between; gap:12px; margin-bottom:8px }
  #ccx-gallery .ccx-pill, #ccx-gallery .ccx-chip{
    border:1.5px solid rgba(255,255,255,.65); color:#fff; font-weight:700; letter-spacing:.5px;
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px; user-select:none;
    padding:6px 12px; font-size:12px; opacity:.95;
  }
  #ccx-gallery .ccx-chip{ padding:6px 14px; opacity:.9 }
  #ccx-gallery .ccx-headline{ font-weight:800; line-height:1.15; font-size:28px; margin:10px 0 0 }
  #ccx-gallery .ccx-cta{ display:flex; align-items:center; gap:12px; margin-top:16px }
  #ccx-gallery .ccx-round{
    width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
    background:rgba(255,255,255,.92); color:#2a2a2a; border:none;
    box-shadow:0 8px 16px rgba(0,0,0,.2);
    transform:translateY(0); transition: transform .25s ease, box-shadow .25s ease;
    pointer-events:none; /* Neden: buton dekoratif, tıklama karta gider */
  }
  #ccx-gallery .ccx-card:hover .ccx-round{ transform:translateY(-2px) }
  #ccx-gallery .ccx-round svg{ width:18px; height:18px }

  /* Tam kartı tıklanabilir yapan link katmanı */
  #ccx-gallery .ccx-link{
    position:absolute; inset:0; z-index:3; /* İçeriğin üstünde */
    text-decoration:none; color:inherit; border-radius:var(--radius);
  }
  #ccx-gallery .ccx-link:focus-visible{
    outline:3px solid #fff; outline-offset: -3px; /* Neden: klavye erişilebilirliği */
  }

  @media (max-width: 900px){
    #ccx-gallery .ccx-card{ min-width:100%; height:260px }
    #ccx-gallery .ccx-headline{ font-size:24px }
  }
  @media (max-width: 520px){
    #ccx-gallery .ccx-wrap{ padding:16px }
    #ccx-gallery .ccx-content{ padding:20px }
    #ccx-gallery .ccx-headline{ font-size:22px }
  }
</style>

<div id="ccx-gallery">
  <section class="ccx-wrap">
    <main class="ccx-container" aria-label="Vurgu Kartları">
      
      <article class="ccx-card" aria-label="01 Sarı-Lacivert Koleksiyonu">
        <a class="ccx-link" href="https://belizsamliart.com/pages/sari-lacivert-koleksiyonu" aria-label="Sarı-Lacivert Koleksiyonu sayfasına git"></a>
        <div class="ccx-bg" style="background-image:url('https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/b1a158b0-0da8-48a9-8b20-806cfdd697b7/image_1080.webp');">
        </div>
        <div class="ccx-shade"></div>
        <div class="ccx-content">
          <div>
            <div class="ccx-topline">
              <span class="ccx-pill">/01</span>
              <span class="ccx-chip">incele</span>
            </div>
            <h2 class="ccx-headline">Sarı-Lacivert Koleksiyonu</h2>
          </div>
          <div class="ccx-cta">
            <div class="ccx-round" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path>
              </svg>
            </div>
          </div>
        </div>
      </article>

      
      <article class="ccx-card" aria-label="02 Katman Serisi">
        <a class="ccx-link" href="https://belizsamliart.com/pages/katman-serisi" aria-label="Katman Serisi sayfasına git"></a>
        <div class="ccx-bg" style="background-image:url('https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/9b583000-233e-45e0-a3cc-4b940c93ae99/image_1080.webp');">
        </div>
        <div class="ccx-shade"></div>
        <div class="ccx-content">
          <div>
            <div class="ccx-topline">
              <span class="ccx-pill">/02</span>
              <span class="ccx-chip">incele</span>
            </div>
            <h2 class="ccx-headline">Katman Serisi</h2>
          </div>
          <div class="ccx-cta">
            <div class="ccx-round" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path>
              </svg>
            </div>
          </div>
        </div>
      </article>
    </main>
  </section>
</div>

<p>Während deines Besuchs werden deine persönlichen Daten mithilfe von Cookies verarbeitet, um deine Nutzung der Website zu analysieren, Werbung zu personalisieren und Social-Media-Funktionen bereitzustellen. Für weitere Informationen kannst du unsere Cookie-Richtlinien lesen.</p>

Wähle ein anderes Land oder eine andere Region, um standortspezifische Inhalte zu sehen.

kostenloser Versand ab einem Bestellwert von 100€

<p>During your visit, your personal data is processed through cookies to analyze your use of the site, personalize advertisements and provide social media features. For more information, you can read our Cookie-Policy.</p>

Select another country or region to see location-specific content.

Free shipping for purchases of 100€ and over

<p>Ziyaretiniz sırasında kişisel verileriniz siteyi kullanımınızı analiz etmek, reklamları kişiselleştirmek ve sosyal medya özellikleri sağlamak amacıyla çerezler aracılığıyla işlenmektedir. Daha fazla bilgi için <strong>Çerez Aydınlat Metni’ni</strong> okuyabilirsiniz.</p>

Sarı-Lacivert Koleksiyonu

Katman Serisi

Aydınlatma Metinleri

İletişim Bilgileri

Yardım