:root{
    --ink:#0f0c09;
    --charcoal:#1d1712;
    --charcoal-2:#241d16;
    --gold:#b8935a;
    --gold-light:#e0c691;
    --gold-dim:#8a7048;
    --ivory:#f7f1e4;
    --ivory-dim:#efe6d2;
    --stone:#8c7f68;
    --line:#e6dcc3;
    --ok:#425e42;
    --err:#93433a;
    --shadow: 0 20px 50px rgba(8,5,2,0.4);
    --shadow-sm: 0 8px 20px rgba(8,5,2,0.15);
  }

  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    min-height:100vh;
    font-family:'Inter', system-ui, sans-serif;
    background:
      radial-gradient(circle at 12% -10%, rgba(184,147,90,0.12), transparent 45%),
      radial-gradient(circle at 100% 15%, rgba(184,147,90,0.07), transparent 40%),
      var(--ink);
    color:var(--ivory);
    padding: 44px 16px 90px;
  }

  .page{
    width:100%;
    max-width: 760px;
    margin: 0 auto;
  }

  /* ---------- LOGO / BRANDMARK ---------- */
  header.hero{
    text-align:center;
    margin-bottom: 36px;
  }

  .brandmark{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 14px;
    margin-bottom: 22px;
  }
  .brand-emblem{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background: radial-gradient(circle at 35% 30%, rgba(224,198,145,0.15), transparent 70%);
  }
  .brand-emblem svg{
    width: 28px;
    height: 28px;
    stroke: var(--gold-light);
  }
  .brand-text{
    text-align:left;
    line-height:1.15;
  }
  .brand-name{
    font-family:'Cormorant Garamond', serif;
    font-weight:700;
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--ivory);
    display:block;
  }
  .brand-tag{
    font-size: 10.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    display:block;
    margin-top: 3px;
  }

  .hero-rule{
    width: 64px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 22px;
    position:relative;
  }
  .hero-rule::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:5px; height:5px;
    background: var(--gold);
    border-radius:50%;
    transform: translate(-50%,-50%) rotate(45deg);
  }

  h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size: clamp(28px, 5.5vw, 42px);
    margin: 0 0 10px;
    color: var(--ivory);
    letter-spacing: 0.5px;
  }
  .hero-sub{
    color: var(--stone);
    font-size: 14px;
    max-width: 420px;
    margin: 0 auto;
    line-height:1.55;
  }

  /* ---------- CARD ---------- */
  .card{
    background: var(--ivory);
    color: var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 30px 26px;
    margin-bottom: 22px;
    border: 1px solid rgba(0,0,0,0.04);
  }
  @media (max-width: 560px){
    .card{ padding: 24px 18px; border-radius: 16px; }
  }

  .card-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 20px;
  }
  .card-head h2{
    font-family:'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight:600;
    margin:0;
    color: var(--charcoal);
    letter-spacing:0.3px;
  }
  .card-head .count-pill{
    font-size: 12px;
    color: var(--gold-dim);
    background: #f7edd8;
    border: 1px solid #e9d6ab;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }

  .field{ margin-bottom: 20px; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block;
    font-size: 12px;
    font-weight:600;
    letter-spacing:0.6px;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 9px;
  }

  select, input[type=text]{
    width:100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance:none;
    appearance:none;
  }
  select{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%238c7f68' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
  }
  select:focus, input:focus{
    outline:none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,147,90,0.16);
  }

  .type-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  #widthGrid.type-grid,
  #flatWidthGrid.type-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 500px){
    .type-grid{ grid-template-columns: 1fr; }
    #widthGrid.type-grid,
    #flatWidthGrid.type-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  .type-option{
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 14px 12px;
    cursor:pointer;
    text-align:center;
    transition: all .15s ease;
    background:#fff;
  }
  .type-option input{ display:none; }
  .type-option .name{
    font-weight:600;
    font-size: 14px;
    color: var(--charcoal);
    display:block;
    margin-bottom:3px;
  }
  .type-option .desc{
    font-size: 11px;
    color: var(--stone);
  }
  .type-option.selected{
    border-color: var(--gold);
    background: #f7edd8;
    box-shadow: inset 0 0 0 1px var(--gold);
  }

  .preview-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: var(--ivory-dim);
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 4px;
    margin-bottom: 20px;
  }
  .preview-row .p-label{
    font-size: 12px;
    color: var(--stone);
    text-transform:uppercase;
    letter-spacing:0.4px;
  }
  .preview-row .p-price{
    font-family:'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight:700;
    color: var(--charcoal);
  }

  .btn{
    width:100%;
    padding: 15px;
    border:none;
    border-radius: 11px;
    background: var(--charcoal);
    color: var(--ivory);
    font-size: 14px;
    font-weight:600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: inherit;
    cursor:pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: var(--shadow-sm);
  }
  .btn:hover{ background: #171310; }
  .btn:active{ transform: scale(0.985); }
  .btn:disabled{
    background:#d8cfba;
    color:#a89f8c;
    cursor:not-allowed;
    box-shadow:none;
  }
  .btn.add::before{ content:"+ "; }
  .btn.whatsapp{ background: var(--ok); }
  .btn.whatsapp:hover{ background:#354c36; }

  /* ---------- SEPET ---------- */
  .cart-empty{
    text-align:center;
    padding: 30px 10px;
    color: var(--stone);
    font-size: 14px;
  }
  .cart-empty .icon{
    font-size: 26px;
    display:block;
    margin-bottom: 8px;
  }

  .cart-list{ margin-bottom: 20px; }
  .cart-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .cart-item:first-child{ padding-top: 0; }
  .cart-item:last-child{ border-bottom:none; padding-bottom:0; }

  .ci-main{ flex:1; min-width:0; }
  .ci-title{
    font-weight:600;
    font-size: 15px;
    color: var(--charcoal);
    margin-bottom: 2px;
  }
  .ci-sub{
    font-size: 12.5px;
    color: var(--stone);
  }

  .ci-qty{
    display:flex;
    align-items:center;
    gap: 8px;
    margin-top: 8px;
  }
  .qty-btn{
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--charcoal);
    font-size: 15px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: inherit;
  }
  .qty-btn:hover{ border-color: var(--gold); color: var(--gold-dim); }
  .qty-val{
    min-width: 20px;
    text-align:center;
    font-size: 13px;
    font-weight:600;
  }
  .qty-input{
    width: 44px;
    text-align:center;
    font-size: 13px;
    font-weight:700;
    padding: 5px 4px;
    border-radius: 6px;
    border: 1.5px solid var(--gold);
    background: #fdf7ec;
    color: var(--charcoal);
    font-family: inherit;
    cursor: text;
    box-shadow: inset 0 0 0 1px rgba(184,147,90,0.18);
    -moz-appearance: textfield;
  }
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  .qty-input:hover{
    border-color: var(--gold-light);
  }
  .qty-input:focus{
    outline:none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,147,90,0.22);
  }

  .ci-right{
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap: 8px;
  }
  .ci-price{
    font-family:'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight:700;
    color: var(--charcoal);
    white-space:nowrap;
  }
  .ci-remove{
    background:none;
    border:none;
    color: var(--stone);
    font-size: 12px;
    cursor:pointer;
    text-decoration: underline;
    padding:0;
    font-family: inherit;
  }
  .ci-remove:hover{ color: var(--err); }

  .cart-total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1.5px solid var(--charcoal);
  }
  .cart-total .t-label{
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform:uppercase;
    color: var(--stone);
  }
  .cart-total .t-amount{
    font-family:'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight:700;
    color: var(--charcoal);
  }

  .btn-row{
    display:flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
  }
  .btn-row .btn{
    width: 100%;
    min-width: 0;
  }
  .btn.ghost{
    background: transparent;
    color: var(--stone);
    box-shadow:none;
    border: 1.5px solid var(--line);
    font-weight:600;
  }
  .btn.ghost:hover{
    background: #f7ece5;
    color: var(--err);
    border-color: #e9d3c9;
  }

  .error-msg{
    color: var(--err);
    font-size: 13px;
    margin-top: 8px;
    display:none;
  }
  .error-msg.show{ display:block; }

  .divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 26px 0 20px;
  }
  .divider .line{ flex:1; height:1px; background: var(--line); }
  .divider .dot{
    width:5px;height:5px;
    background: var(--gold);
    border-radius:50%;
    transform: rotate(45deg);
  }

  footer{
    text-align:center;
    color: rgba(247,241,228,0.35);
    font-size: 11.5px;
    letter-spacing: 1px;
    margin-top: 26px;
  }

  /* toast */
  .toast{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: var(--charcoal);
    color: var(--ivory);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13.5px;
    box-shadow: var(--shadow);
    opacity:0;
    pointer-events:none;
    transition: all .25s ease;
    z-index: 50;
    white-space:nowrap;
    max-width: calc(100vw - 32px);
  }
  .toast.show{
    opacity:1;
    transform: translateX(-50%) translateY(0);
  }