.acbcrs-wrap{--ink:#173747;--blue:#0874ad;--line:#dce7ec;width:min(1180px,calc(100% - 36px));margin:70px auto;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.acbcrs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:48px;align-items:end;margin-bottom:28px}
.acbcrs-kicker{display:block;margin-bottom:8px;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.acbcrs-head h2{margin:0;color:#173547;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.04em}
.acbcrs-head p{margin:0;color:#6b808d;font-size:13px;line-height:1.75}

.acbcrs-app{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.65fr);overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(13,47,68,.08)}
.acbcrs-view{padding:24px;background:linear-gradient(180deg,#eef5f8,#fff)}
.acbcrs-stage{position:relative;overflow:hidden;border-radius:17px;aspect-ratio:1448/1086;background:#dce7ed;box-shadow:inset 0 0 0 1px rgba(16,52,72,.08)}
.acbcrs-before,.acbcrs-after{position:absolute;inset:0}
.acbcrs-before img,.acbcrs-after>img{display:block;width:100%;height:100%;object-fit:cover}
.acbcrs-after{clip-path:inset(0 0 0 var(--split))}

/* Gerçek cam balkon profil ve cam maskeleri — v3.1.0
   Sahte ızgara çizilmez. Renk doğrudan SONRA görselindeki mevcut
   profil piksellerinin üzerinde değiştirilir. */
.acbcrs-real-color-layers{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.acbcrs-real-glass-tint,
.acbcrs-real-profile-color{
  position:absolute;
  inset:0;
}
.acbcrs-real-glass-tint{
  background:var(--glass);
  opacity:var(--glass-opacity);
  mix-blend-mode:var(--glass-blend, multiply);
  -webkit-mask-image:url("images/cam-mask.png");
  mask-image:url("images/cam-mask.png");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
}
.acbcrs-real-profile-color{
  background:var(--profile);
  opacity:var(--profile-opacity,.72);
  mix-blend-mode:var(--profile-blend,normal);
  -webkit-mask-image:url("images/profil-mask.png");
  mask-image:url("images/profil-mask.png");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
}

.acbcrs-divider{position:absolute;z-index:8;top:0;bottom:0;left:var(--split);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.24);transform:translateX(-1px);pointer-events:none}
.acbcrs-divider span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:#1c526c;box-shadow:0 5px 16px rgba(0,0,0,.2);transform:translate(-50%,-50%);font-size:18px;font-weight:900}
.acbcrs-range{position:absolute;z-index:10;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.acbcrs-label{position:absolute;z-index:7;top:14px;padding:8px 11px;border-radius:9px;background:rgba(11,38,53,.76);color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.08em}
.acbcrs-label.before{left:14px}.acbcrs-label.after{right:14px}

.acbcrs-current{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:15px 2px 0}
.acbcrs-current span{color:#8b99a1;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.acbcrs-current strong{color:#0874ad;font-size:12px}
.acbcrs-info{margin-top:12px;padding:13px 14px;border:1px solid #e1e9ed;border-radius:10px;background:#fff;color:#71838d;font-size:10px;line-height:1.6}
.acbcrs-info b{color:#365565}

.acbcrs-controls{padding:26px 24px;background:#fff}
.acbcrs-group{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid #e7edef}
.acbcrs-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.acbcrs-title b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eaf5fa;color:#0874ad;font-size:11px}
.acbcrs-title span{color:#294858;font-size:14px;font-weight:850}

.acbcrs-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.acbcrs-swatch{display:flex;align-items:center;gap:8px;min-height:54px;padding:9px 10px;border:1px solid #dce5e9;border-radius:12px;background:#fff;cursor:pointer;text-align:left}
.acbcrs-swatch:hover,.acbcrs-swatch.is-active{border-color:#0b82c6;background:#f1f9fc;box-shadow:0 0 0 2px rgba(11,130,198,.10)}
.acbcrs-swatch i{flex:0 0 28px;width:28px;height:28px;border-radius:7px;border:1px solid rgba(0,0,0,.15)}
.acbcrs-swatch span{color:#5d727e;font-size:10px;font-weight:800}

.acbcrs-result{padding:20px;border-radius:15px;background:linear-gradient(145deg,#102f42,#07699e);color:#fff}
.acbcrs-result>span{display:block;color:#afd8e9;font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.acbcrs-result>strong{display:block;margin:8px 0 8px;font-size:17px;line-height:1.3}
.acbcrs-result>p{margin:0;color:#cfe0e7;font-size:9.5px;line-height:1.65}
.acbcrs-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px}
.acbcrs-actions a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:9px;color:#fff;text-align:center;font-size:9.5px;font-weight:850}
.acbcrs-actions a:first-child{background:#fff;color:#0a5a87;border-color:#fff}

#acbcrs-auto-mount[hidden]{display:none!important}

@media(max-width:1000px){
  .acbcrs-app{grid-template-columns:1fr}
  .acbcrs-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .acbcrs-group{margin:0}
  .acbcrs-result{grid-column:1/-1}
}
@media(max-width:760px){
  .acbcrs-wrap{width:min(100% - 24px,1180px);margin:52px auto}
  .acbcrs-head{grid-template-columns:1fr;gap:12px}
  .acbcrs-view{padding:12px}
  .acbcrs-controls{display:block;padding:22px 18px}
  .acbcrs-group{margin-bottom:22px}
  .acbcrs-swatches{grid-template-columns:repeat(2,1fr)}
  .acbcrs-label{top:8px;font-size:7.5px}
  .acbcrs-label.before{left:8px}.acbcrs-label.after{right:8px}
}
@media(max-width:430px){
  .acbcrs-head h2{font-size:28px}
  .acbcrs-divider span{width:36px;height:36px}
  .acbcrs-swatch{min-height:50px}
}


/* v3.3.2 — Cam Balkon Hangi Renk Kullanışlı? içerik yerleşimi */
.acbcrs-article-embed{
  margin:38px 0 44px;
  clear:both;
}
.acbcrs-article-embed .acbcrs-wrap{
  width:100%;
  max-width:none;
  margin:0;
}
.acbcrs-article-embed .acbcrs-head{
  margin-bottom:22px;
}
.acbcrs-article-embed .acbcrs-head h2{
  font-size:clamp(27px,3vw,39px);
}
.acbcrs-article-embed .acbcrs-app{
  border-radius:18px;
}
@media (max-width:760px){
  .acbcrs-article-embed{
    margin:28px 0 34px;
  }
}


/* =========================================================
   v3.3.3 - SADECE BLOG YAZISI HİZALAMA DÜZELTMESİ
   /cam-balkon-renkleri/ sayfasındaki doğru simülatöre dokunmaz.
   Tema .acb-blog-content img kuralı görsellere 28px margin verdiği
   için bina fotoğrafı aşağı kayıyor, maskeler yerinde kalıyordu.
   ========================================================= */
.acb-blog-content .acbcrs-article-embed .acbcrs-stage .acbcrs-before > img,
.acb-blog-content .acbcrs-article-embed .acbcrs-stage .acbcrs-after > img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

/* Blog içerik tipografisinin simülatör başlık/paragraflarını bozmasını engelle. */
.acb-blog-content .acbcrs-article-embed .acbcrs-head h2{
  margin:0!important;
}
.acb-blog-content .acbcrs-article-embed .acbcrs-head p{
  margin:0!important;
}
.acb-blog-content .acbcrs-article-embed .acbcrs-result p{
  margin:0!important;
}

/* Maskeler ve fotoğraf aynı koordinat sisteminde tam üst üste kalsın. */
.acb-blog-content .acbcrs-article-embed .acbcrs-stage,
.acb-blog-content .acbcrs-article-embed .acbcrs-before,
.acb-blog-content .acbcrs-article-embed .acbcrs-after,
.acb-blog-content .acbcrs-article-embed .acbcrs-real-color-layers{
  box-sizing:border-box;
}