/* Kendi İncini Tasarla — simülatör. Mağaza tipografisiyle uyumlu (Cormorant + Montserrat). */
.nb-wrap{max-width:1240px;margin:0 auto;padding:28px 18px 60px}
.nb-empty{text-align:center;color:#888;padding:80px 20px;font-size:15px}
/* ⚠️ minmax(0,1fr) ZORUNLU: sade `1fr` = minmax(auto,1fr) ve `auto` alt siniri MIN-CONTENT'tir.
   Icerideki genis oge (onizleme, secenek izgarasi) parcayi kendi min-content'ine kadar
   GENISLETIR ve mobilde sayfa tasar. Olculdu: kutu 287px iken icerik 501px idi.
   min-width:0 ayni sebeple grid COCUKLARINA da gerekli. */
.nb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.nb-grid>*{min-width:0}

/* --- Önizleme: iki katman üst üste (taş altta, uç üstte) --- */
.nb-preview-col{position:sticky;top:96px}
.nb-stage{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border-radius:18px;
  border:1px solid #efefef;overflow:hidden;display:flex;align-items:center;justify-content:center}
.nb-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity .25s ease}
.nb-layer.on{opacity:1}
.nb-hint{position:relative;z-index:3;color:#b3b3b3;font-size:14px;text-align:center;padding:0 24px;
  font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-hint.hide{display:none}

/* --- Adımlar --- */
.nb-kicker{font-size:11px;letter-spacing:.22em;color:#a08b6a;font-weight:700;margin-bottom:6px;
  font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:500;margin:0 0 22px}
.nb-step{border-top:1px solid #f0f0f0;padding:16px 0}
.nb-step-h{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#222;margin-bottom:12px;
  font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-step-h em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:#8a8a8a;margin-left:auto;font-size:12px}
.nb-no{width:22px;height:22px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700}

.nb-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nb-opts>*{min-width:0}
.nb-opt{border:1.5px solid #eee;border-radius:12px;background:#fff;padding:6px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s;text-align:center;font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-opt:hover{border-color:#ccc}
.nb-opt.sel{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,.06)}
.nb-opt img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:#fafafa;border-radius:8px}
.nb-opt-ad{font-size:11px;color:#333;margin-top:5px;line-height:1.3}
.nb-opt-fi{font-size:11px;color:#8a8a8a}

/* Görselsiz kademeler (kapama, hediye) — metin kutucukları */
.nb-opts-text{grid-template-columns:minmax(0,1fr)}
.nb-opts-text .nb-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;text-align:left}
.nb-opts-text .nb-opt-ad{margin-top:0;font-size:13px}

.nb-note{width:100%;margin-top:10px;border:1px solid #eee;border-radius:10px;padding:10px 12px;
  font-size:13px;font-family:'Montserrat',Helvetica,Arial,sans-serif;resize:vertical}
.nb-note:focus{outline:none;border-color:#111}

/* --- Özet + sepet --- */
.nb-summary{border-top:1px solid #f0f0f0;margin-top:6px;padding-top:14px;
  font-family:'Montserrat',Helvetica,Arial,sans-serif;font-size:12.5px;color:#555}
.nb-summary div{display:flex;justify-content:space-between;padding:3px 0}
.nb-summary .nb-sum-ad{color:#777}
.nb-bar{display:flex;align-items:center;gap:12px;margin-top:16px;position:sticky;bottom:12px;
  background:#fff;padding:10px 0}
.nb-reset{width:42px;height:42px;border-radius:50%;border:1px solid #e6e6e6;background:#fff;cursor:pointer;color:#666}
.nb-reset:hover{border-color:#111;color:#111}
.nb-total{flex:1;font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;color:#111}
.nb-add{border:0;background:#111;color:#fff;border-radius:999px;padding:14px 30px;font-weight:700;
  letter-spacing:.1em;font-size:12px;cursor:pointer;font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-add:disabled{background:#dcdcdc;cursor:not-allowed}
.nb-msg{font-size:12.5px;margin-top:6px;min-height:18px;font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-msg.err{color:#b3261e}
.nb-msg.ok{color:#1e7a44}

@media(max-width:900px){
  .nb-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .nb-preview-col{position:static}
  .nb-title{font-size:27px}
  .nb-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- Hediye kutusu görseli (her üründe gösterilen kutunun aynısı) --- */
.nb-box{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;
  border:1px solid #f0f0f0;border-radius:12px;background:#fcfcfc}
.nb-box img{width:62px;height:62px;object-fit:cover;border-radius:8px;cursor:zoom-in;flex:0 0 auto;
  transition:transform .18s}
.nb-box img:hover{transform:scale(1.04)}
.nb-box span{font-size:12px;color:#777;line-height:1.45;font-family:'Montserrat',Helvetica,Arial,sans-serif}

/* Büyütme (lightbox) */
.nb-lb{position:fixed;inset:0;z-index:200020;background:rgba(0,0,0,.9);display:none;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.nb-lb.on{display:flex}
.nb-lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:10px}

/* --- Kargo bilgisi (sepete eklemeden ÖNCE görünür) --- */
.nb-ship{margin-top:14px;border:1px solid #f0f0f0;border-radius:12px;padding:12px 14px;background:#fcfcfc;
  font-family:'Montserrat',Helvetica,Arial,sans-serif}
.nb-ship-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#222;margin-bottom:7px}
.nb-ship ul{margin:0;padding-left:16px}
.nb-ship li{font-size:12.5px;color:#666;line-height:1.6}

/* ===== SLOT MOTORU ===== */
.nb-overlay,.nb-points{position:absolute;inset:0;z-index:2;pointer-events:none}
.nb-points{z-index:3}
/* ⚠️ Ozgulluk: sitenin genel `button{border-radius:5px}` kurali bunu eziyordu (nokta KARE
   goruniyordu, olculdu: computed border-radius=5px). Sahne altina kapsayarak ozgullugu
   yukselttik; kritik iki ozellikte !important son emniyet. */
.nb-stage .nb-point{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50% !important;appearance:none;-webkit-appearance:none;
  border:2px solid rgba(255,255,255,.9);background:rgba(17,17,17,.28);cursor:pointer;padding:0;
  pointer-events:auto;transition:transform .15s,background .15s;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.nb-stage .nb-point:hover{transform:translate(-50%,-50%) scale(1.15);background:rgba(17,17,17,.45)}
/* Uç seçiliyken noktalar "hazır" — nabız efektiyle nereye konacağı belli olur */
.nb-stage .nb-point.hazir{background:#c8a24a;border-color:#fff;animation:nbPulse 1.35s ease-in-out infinite}
@keyframes nbPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,162,74,.55)}50%{box-shadow:0 0 0 9px rgba(200,162,74,0)}}
.nb-placed{position:absolute;transform:translate(-50%,-50%);width:22%;height:auto;cursor:pointer;
  pointer-events:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));transition:transform .15s}
.nb-placed:hover{transform:translate(-50%,-50%) scale(1.08)}
.nb-place-tip{font-size:12px;color:#8a8a8a;margin:-4px 0 10px;font-family:'Montserrat',Helvetica,Arial,sans-serif}

/* Kategori kartları */
.nb-opts-cat{grid-template-columns:repeat(4,minmax(0,1fr))}
.nb-opt-c{padding:14px 6px}
.nb-opt-c i{font-size:20px;color:#a08b6a;display:block;margin-bottom:6px}

/* Kaplama gradyanı (panelden görsel eklenince görsel gelir) */
.nb-swatch{display:block;width:100%;aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(0,0,0,.06)}
.nb-opts-text .nb-swatch{width:34px;height:34px;aspect-ratio:auto;flex:0 0 auto;margin-right:10px}

/* ===== KUTU KARTLARI — tam genişlik, görselli seçim ===== */
.nb-boxes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.nb-boxes>*{min-width:0}
.nb-box-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1.5px solid #eee;border-radius:14px;background:#fff;padding:10px 14px 10px 10px;
  font-family:'Montserrat',Helvetica,Arial,sans-serif;transition:border-color .18s,box-shadow .18s}
.nb-box-card:hover{border-color:#ccc}
.nb-box-card.sel{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,.06)}
.nb-box-media{position:relative;flex:0 0 auto}
.nb-box-media img{width:78px;height:78px;object-fit:cover;border-radius:10px;display:block;background:#fafafa}
.nb-box-zoom{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.94);color:#333;font-size:10px;display:grid;place-items:center;cursor:zoom-in;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.nb-box-txt{flex:1;min-width:0}
.nb-box-txt b{display:block;font-size:13.5px;color:#222;font-weight:600}
.nb-box-txt small{display:block;font-size:11.5px;color:#8a8a8a;line-height:1.45;margin-top:2px}
.nb-box-fi{font-size:12.5px;font-weight:700;color:#222;flex:0 0 auto}
@media(min-width:1100px){ .nb-boxes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(max-width:900px){ .nb-opts-cat{grid-template-columns:repeat(2,minmax(0,1fr))} .nb-placed{width:26%} }

/* Uzun secenek adlari kutuyu genisletmesin */
.nb-opt-ad,.nb-opt-fi,.nb-sum-ad,.nb-box-txt b,.nb-box-txt small{overflow-wrap:anywhere}
.nb-step-h em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.nb-wrap{overflow-x:clip}