/* TOLUN Website-integrated Customizer — CASE V10 engine */
:root{
  --bg:#f6f4ef;
  --bg-2:#f0ede7;
  --paper:#faf9f6;
  --white:#fff;
  --ink:#111111;
  --muted:#696761;
  --muted-2:#8f8b84;
  --line:rgba(17,17,17,.13);
  --line-soft:rgba(17,17,17,.07);
  --accent:#9b7641;
  --header:74px;
  --panel:450px;
  --ease:cubic-bezier(.22,.72,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
::selection{background:#111;color:#fff}

/* Exact visual language of the uploaded homepage header */
.tolun-site-header{
  position:fixed;top:0;left:0;z-index:200;width:100%;height:var(--header);
  padding:0 3.2vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:rgba(250,249,246,.97);border-bottom:1px solid rgba(0,0,0,.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.tolun-brand{justify-self:start}.tolun-brand-symbol{
  width:24px;height:24px;border:1px solid #111;display:grid;place-items:center;font-size:10px
}
.tolun-main-nav{display:flex;align-items:center;gap:58px;text-transform:uppercase;font-size:10px;letter-spacing:.06em}
.tolun-main-nav a{position:relative;padding:10px 0}
.tolun-main-nav a::after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:1px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.tolun-main-nav a:hover::after,.tolun-main-nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.tolun-header-tools{justify-self:end;display:flex;align-items:center;gap:20px}
.tolun-home-link{text-transform:uppercase;font-size:9px;letter-spacing:.07em;display:flex;gap:12px;align-items:center}
.tolun-home-link span{font-size:13px;transition:transform .25s}.tolun-home-link:hover span{transform:translate(3px,-2px)}
.tolun-mobile-menu{display:none;border:0;background:none;width:27px;height:24px;position:relative}
.tolun-mobile-menu i{display:block;width:21px;height:1px;background:#111;position:absolute;left:3px;transition:.25s}
.tolun-mobile-menu i:first-child{top:8px}.tolun-mobile-menu i:last-child{top:15px}
.tolun-mobile-menu[aria-expanded="true"] i:first-child{top:11px;transform:rotate(45deg)}
.tolun-mobile-menu[aria-expanded="true"] i:last-child{top:11px;transform:rotate(-45deg)}
.tolun-mobile-panel{position:fixed;inset:var(--header) 0 0;z-index:190;background:#f6f4ef;opacity:0;visibility:hidden;transform:translateY(-14px);transition:.35s var(--ease)}
.tolun-mobile-panel.open{opacity:1;visibility:visible;transform:none}
.tolun-mobile-panel nav{padding:46px 7vw;display:flex;flex-direction:column}
.tolun-mobile-panel a{display:flex;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:26px;text-transform:uppercase;letter-spacing:-.025em}
.tolun-mobile-panel a span{font-size:8px;color:#77736d;letter-spacing:.1em}

/* Layout: website-like gallery + editorial control column */
.customizer-shell{
  width:100%;height:calc(100vh - var(--header));margin-top:var(--header);
  display:grid;grid-template-columns:minmax(0,1fr) var(--panel);overflow:hidden;background:var(--bg);
}
.intro-panel{position:absolute;left:3.2vw;top:calc(var(--header) + 28px);z-index:20;pointer-events:none}
.intro-copy{max-width:260px}.atelier-mark{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.atelier-mark span{width:24px;height:1px;background:#b58b50}.atelier-mark em{font-style:normal;font-size:9px;letter-spacing:.18em;font-weight:500;text-transform:uppercase;color:#77736d}
#customizer-title{font-size:15px;font-weight:500;letter-spacing:.025em;text-transform:uppercase}
.intro-copy>p{margin-top:9px;max-width:240px;font-size:10px;line-height:1.65;color:#76726b}

.preview-panel{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 42px 30px;background:#faf9f6;overflow:hidden}
.preview-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 42%,rgba(255,255,255,.96),rgba(255,255,255,.4) 37%,transparent 69%);pointer-events:none}
.stage-index{position:absolute;right:3vw;top:25px;font-size:8px;letter-spacing:.13em;color:#8d8982;text-transform:uppercase}
.watch-stage{position:relative;width:min(62vh,620px);aspect-ratio:1;display:grid;place-items:center;isolation:isolate;z-index:2;margin:2px 0 12px}
.watch-halo{position:absolute;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(255,255,255,.62) 52%,transparent 73%);z-index:0;pointer-events:none}
.watch-stage::after{content:"";position:absolute;left:26%;right:26%;bottom:8%;height:5%;border-radius:50%;background:rgba(30,25,20,.10);filter:blur(18px);z-index:0}
.watch-canvas{position:relative;width:100%;height:100%;z-index:2;opacity:0;transition:opacity .28s var(--ease);filter:drop-shadow(0 18px 25px rgba(27,22,17,.07));pointer-events:none}
.watch-canvas.is-ready{opacity:1}.render-loader{position:absolute;width:28px;height:28px;border:1.5px solid rgba(0,0,0,.12);border-top-color:#111;border-radius:50%;opacity:0;visibility:hidden;z-index:5;animation:spin .65s linear infinite}.render-loader.is-visible{opacity:1;visibility:visible}@keyframes spin{to{transform:rotate(360deg)}}

.view-area{z-index:5}.view-switcher{display:grid;grid-template-columns:repeat(3,1fr);width:310px;border:1px solid #aaa69e;background:rgba(250,249,246,.94)}
.view-btn{height:42px;border:0;border-right:1px solid rgba(17,17,17,.10);background:transparent;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#5e5b55;display:flex;align-items:center;justify-content:center;gap:8px;transition:.25s var(--ease)}
.view-btn:last-child{border-right:0}.view-btn span{font-size:7px;color:#918d86}.view-btn:hover{background:#f0ede7}.view-btn.is-active{background:#111;color:#fff}.view-btn.is-active span{color:#c8c3ba}
.view-thumbs{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.selection-chips{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-top:18px;z-index:5;max-width:620px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.selection-chip{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;font-size:9px;color:#4d4a45;border-right:1px solid var(--line);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.selection-chip:last-child{border-right:0}.selection-chip>span{font-size:7px;text-transform:uppercase;letter-spacing:.09em;color:#918c83}

/* Right configurator column */
.options-panel{height:100%;display:flex;flex-direction:column;background:#fff;border-left:1px solid rgba(17,17,17,.08);overflow:hidden;z-index:20}
.options-header{padding:24px 30px 20px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}
.options-eyebrow{display:block;margin-bottom:7px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#77736d}
.options-header h2{font-size:22px;letter-spacing:-.025em;font-weight:500;text-transform:uppercase}
.step-count{font-size:8px;letter-spacing:.1em;color:#77736d;text-transform:uppercase;border:1px solid #cbc7bf;padding:6px 9px}
.options-scroll{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#d4d0c8 transparent}.options-scroll::-webkit-scrollbar{width:4px}.options-scroll::-webkit-scrollbar-thumb{background:#d4d0c8}
.option-section{position:relative;border-bottom:1px solid var(--line)}
.option-section::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}.option-section.is-open::before{background:#111}
.section-head{width:100%;border:0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;transition:.2s var(--ease)}
.section-head:hover{background:#faf9f6}.section-head>span:first-child{display:flex;align-items:center;gap:14px}
.section-no{font-size:9px;color:#aaa69f;width:22px}.option-section.is-open .section-no{color:#111}
.section-title{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.section-title b{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.015em}.section-title small{font-size:10px;color:#77736d;font-weight:400}.chevron{font-size:10px;color:#aaa69f}
.section-body{display:none;padding:0 24px 22px;max-height:365px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ddd9d1 transparent}.option-section.is-open .section-body{display:block}
.option-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.option-card{appearance:none;border:1px solid #dedad2;background:#faf9f6;padding:7px 6px 9px;position:relative;transition:.25s var(--ease);min-width:0}
.option-card:hover{background:#fff;border-color:#a9a59d;transform:translateY(-2px)}
.option-card.is-selected{background:#fff;border-color:#111;box-shadow:0 0 0 1px #111}.option-card.is-selected::after{content:"✓";position:absolute;right:5px;top:5px;width:17px;height:17px;background:#111;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:8px}
.option-card.is-unavailable{opacity:.3;cursor:not-allowed}.option-card.is-unavailable::after{content:"Tükendi";position:absolute;left:5px;right:5px;bottom:5px;background:#fff;padding:2px 4px;font-size:7px;text-align:center}
.option-image{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#fff;overflow:hidden}.option-image img{width:100%;height:100%;object-fit:contain;transition:transform .35s var(--ease)}.option-card:hover .option-image img{transform:scale(1.035)}
.option-name{display:block;margin-top:6px;font-size:8px;line-height:1.3;color:#393733;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-meta{display:block;text-align:center;font-size:7px;color:#949089;margin-top:2px}

.engraving-body{max-height:none;overflow:visible}.engraving-body label{display:block;margin-bottom:8px;font-size:10px;color:#5c5953;text-transform:uppercase;letter-spacing:.05em}.engraving-field{position:relative}.engraving-field input{width:100%;border:1px solid #bbb7af;background:#fff;padding:13px 72px 13px 13px;font-size:12px;outline:0}.engraving-field input:focus{border-color:#111}.engraving-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:8px;color:#8f8b84}.engraving-body>small{display:block;margin-top:8px;font-size:9px;color:#8f8b84;line-height:1.5}

.purchase-bar{border-top:1px solid var(--line);background:#faf9f6;padding:19px 28px 20px}.purchase-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin-bottom:14px}.price-wrap span,.qty-wrap>span{display:block;margin-bottom:5px;font-size:8px;color:#77736d;text-transform:uppercase;letter-spacing:.08em}.price-wrap strong{display:block;font-size:28px;line-height:1;font-weight:500;letter-spacing:-.03em}.price-wrap small{display:block;margin-top:4px;font-size:8px;color:#96928b}.qty-wrap{min-width:112px}.qty-control{display:grid;grid-template-columns:36px 40px 36px;border:1px solid #bbb7af;background:#fff}.qty-control button{height:36px;border:0;background:transparent;font-size:15px}.qty-control button:hover{background:#efede8}.qty-control output{display:grid;place-items:center;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:11px}
.cart-btn,.save-btn{width:100%;border-radius:0;transition:.25s var(--ease)}.cart-btn{min-height:51px;border:1px solid #111;background:#111;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.cart-btn:hover{background:#2a2926}.cart-btn:disabled{opacity:.45;cursor:wait}.cart-arrow{font-size:16px;font-weight:300}.save-btn{min-height:42px;border:1px solid #aaa69e;background:transparent;margin-top:8px;font-size:9px;text-transform:uppercase;letter-spacing:.05em}.save-btn:hover{background:#fff;border-color:#111}.purchase-assurance{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:11px;font-size:8px;color:#9a968f;text-transform:uppercase;letter-spacing:.04em}.purchase-assurance i{display:block;width:2px;height:2px;background:#aaa69e;border-radius:50%}
.toast{position:fixed;left:50%;bottom:24px;z-index:400;transform:translate(-50%,18px);opacity:0;visibility:hidden;background:#111;color:#fff;padding:11px 16px;font-size:10px;letter-spacing:.03em;transition:.25s var(--ease)}.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media(max-width:1180px){:root{--panel:410px}.watch-stage{width:min(57vh,540px)}.options-header{padding-left:22px;padding-right:22px}.section-head{padding-left:22px;padding-right:22px}.section-body{padding-left:18px;padding-right:18px}.purchase-bar{padding-left:22px;padding-right:22px}.tolun-main-nav{gap:38px}}
@media(max-width:920px){
  :root{--header:64px}
  body{overflow:auto}.tolun-main-nav,.tolun-home-link{display:none}.tolun-mobile-menu{display:block}.tolun-site-header{grid-template-columns:1fr auto;padding:0 5vw}.tolun-header-tools{justify-self:end}
  .customizer-shell{height:auto;min-height:calc(100vh - var(--header));grid-template-columns:1fr;overflow:visible}.intro-panel{position:relative;left:auto;top:auto;padding:28px 6vw 0;background:#faf9f6}.intro-copy>p{display:none}.preview-panel{height:auto;min-height:560px;padding:20px 18px 34px}.stage-index{right:6vw;top:20px}.watch-stage{width:min(82vw,500px);margin:4px auto 12px}.options-panel{height:auto;border-left:0;border-top:1px solid var(--line)}.options-scroll{overflow:visible}.section-body{max-height:370px}.options-header{position:sticky;top:var(--header);z-index:30}.purchase-bar{position:sticky;bottom:0;z-index:30;box-shadow:0 -10px 35px rgba(0,0,0,.04)}
}
@media(max-width:560px){
  .intro-panel{padding:22px 18px 0}.atelier-mark em{font-size:8px}#customizer-title{font-size:13px}.preview-panel{min-height:490px;padding:12px 10px 26px}.stage-index{display:none}.watch-stage{width:min(94vw,390px);margin:0 auto 8px}.view-switcher{width:min(92vw,310px)}.view-btn{height:40px;font-size:9px}.selection-chips{max-width:94vw;margin-top:14px}.selection-chip{font-size:8px;padding:7px 8px;max-width:47%}.options-header{padding:18px 16px 15px}.options-header h2{font-size:19px}.step-count{font-size:7px}.section-head{padding:15px 16px}.section-body{padding:0 12px 16px}.option-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.purchase-bar{padding:15px 16px}.purchase-top{grid-template-columns:1fr auto}.price-wrap strong{font-size:23px}.cart-btn{min-height:48px}}
@media(max-width:390px){.option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.selection-chips{display:none}.purchase-top{grid-template-columns:1fr}.qty-wrap{width:100%}.qty-control{width:112px}}

body.menu-open{overflow:hidden!important}

/* =========================================================
   SITE TYPOGRAPHY + HEADER SYNC — matches the main TOLUN UI
   ========================================================= */
.tolun-main-nav{font-size:13px;letter-spacing:.05em;gap:40px}
.tolun-header-tools{gap:14px}
.tolun-icon-button,.tolun-mobile-menu{
  border:0;background:none;padding:4px;cursor:pointer;position:relative;
  display:grid;place-items:center;color:var(--ink)
}
.tolun-icon-button{width:28px;height:28px}
.tolun-icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.25}
.tolun-cart-badge{
  position:absolute;right:-5px;top:-6px;background:#111;color:#fff;
  min-width:15px;height:15px;padding:0 3px;border-radius:12px;font-size:8px;display:grid;place-items:center
}

/* Customizer text was designed before the site-wide type scale was enlarged. */
.atelier-mark em{font-size:11px}
#customizer-title{font-size:19px}
.intro-copy{max-width:330px}
.intro-copy>p{max-width:310px;font-size:14px;line-height:1.72}
.stage-index{font-size:10px}
.view-btn{font-size:12px}
.view-btn span{font-size:9px}
.selection-chip{font-size:11px;padding:9px 13px}
.selection-chip>span{font-size:9px}
.options-eyebrow{font-size:10px}
.options-header h2{font-size:24px}
.step-count{font-size:10px}
.section-no{font-size:11px}
.section-title b{font-size:16px}
.section-title small{font-size:12px}
.chevron{font-size:12px}
.option-name{font-size:11px;line-height:1.35}
.option-meta{font-size:9px}
.option-card.is-unavailable::after{font-size:9px}
.engraving-body label{font-size:12px}
.engraving-field input{font-size:14px}
.engraving-field span{font-size:10px}
.engraving-body>small{font-size:11px}
.price-wrap span,.qty-wrap>span{font-size:10px}
.price-wrap small{font-size:10px}
.qty-control output{font-size:13px}
.cart-btn{font-size:13px}
.save-btn{font-size:11px}
.purchase-assurance{font-size:10px}
.toast{font-size:12px}

@media(max-width:1180px){
  .tolun-main-nav{font-size:12px;gap:24px}
}
@media(max-width:980px){
  .tolun-main-nav{display:none}
  .tolun-mobile-menu{display:block}
  .tolun-site-header{grid-template-columns:1fr auto;padding:0 22px}
  .tolun-header-tools{gap:12px}
  .tolun-mobile-panel a{font-size:32px}
  .tolun-mobile-panel a span{font-size:11px}
}
@media(max-width:640px){
  :root{--header:64px}
  .tolun-site-header{padding:0 16px}
  .tolun-header-tools{gap:9px}
  .tolun-icon-button{width:30px;height:30px;padding:3px}
  .tolun-icon-button svg{width:19px;height:19px}
  .tolun-mobile-menu{width:26px;height:24px;margin-left:1px}
  .tolun-brand-symbol{width:24px;height:24px}
  .tolun-mobile-panel a{font-size:29px}
  .atelier-mark em{font-size:10px}
  #customizer-title{font-size:17px}
  .view-btn{font-size:11px}
  .selection-chip{font-size:10px}
  .options-eyebrow{font-size:9px}
  .options-header h2{font-size:21px}
  .step-count{font-size:9px}
  .section-title b{font-size:15px}
  .section-title small{font-size:11px}
  .option-name{font-size:10px}
  .option-meta{font-size:9px}
  .cart-btn{font-size:12px}
  .save-btn{font-size:10px}
}
@media(max-width:390px){
  .tolun-site-header{padding:0 12px}
  .tolun-header-tools{gap:5px}
  .tolun-icon-button{width:27px;height:28px}
  .tolun-icon-button svg{width:18px;height:18px}
  .tolun-mobile-menu{width:24px}
}