/* ==========================================================================
   MARKA MUTFAK — Satış sayfaları: online keşif randevusu (rz-), mutfak planlayıcı (pl-),
   ilçe sayfaları (bz-). lux.css değişkenlerini ve bileşenlerini kullanır.
   ========================================================================== */

/* ---------- Ortak ---------- */
.sat-note{font-size:12.5px;color:var(--ink3)}
.sat-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 11px/1.2 var(--f-b);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.sat-h b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);font-size:13px;color:var(--ink2);background:rgba(255,255,255,.015);transition:border-color .3s,background-color .3s,color .3s}
.chip:hover{border-color:rgba(201,165,102,.5);color:var(--ink)}
.chip.is-sel{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}
.chip[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- Randevu ---------- */
.rz-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.rz-side h2{font-size:clamp(24px,2.2vw,32px);margin-bottom:18px}
.rz-list{display:grid;gap:16px;margin:0 0 28px;padding:0;list-style:none}
.rz-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.rz-list i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--gold)}
.rz-list i .ic{width:17px;height:17px}
.rz-list b{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
.rz-list span{font-size:14px;color:var(--ink3)}
.rz-book{padding:clamp(22px,3vw,36px)}
.rz-step{margin-bottom:26px}
.rz-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent}
.rz-days::-webkit-scrollbar{height:5px}
.rz-days::-webkit-scrollbar-track{background:transparent}
.rz-days::-webkit-scrollbar-thumb{background:var(--gold-lo);border-radius:9px}
.rz-day{flex:0 0 auto;width:74px;padding:12px 6px 10px;border-radius:var(--r);border:1px solid var(--line2);text-align:center;scroll-snap-align:start;transition:border-color .3s,background-color .3s}
.rz-day small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.rz-day b{display:block;margin:4px 0 2px;font:500 26px/1 var(--f-d);color:var(--ink)}
.rz-day em{display:block;font-style:normal;font-size:11px;color:var(--ink3)}
.rz-day i{display:block;margin-top:6px;font-style:normal;font-size:10.5px;color:var(--gold)}
.rz-day:hover{border-color:rgba(201,165,102,.5)}
.rz-day.is-sel{border-color:var(--gold);background:var(--gold-soft)}
.rz-day[disabled]{opacity:.32;cursor:not-allowed}
.rz-day[disabled] i{color:var(--ink3)}
.rz-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.rz-time{padding:13px 8px;border-radius:var(--r);border:1px solid var(--line2);font-size:15px;font-weight:600;color:var(--ink);transition:border-color .3s,background-color .3s}
.rz-time:hover{border-color:rgba(201,165,102,.5)}
.rz-time.is-sel{border-color:var(--gold);background:var(--gold);color:#15110a}
.rz-time[disabled]{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.rz-pick{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);border:1px dashed var(--line2);font-size:14px;color:var(--ink2)}
.rz-pick .ic{color:var(--gold)}
.rz-pick b{color:var(--ink)}
.rz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.rz-done{text-align:center;padding:12px 0}
.rz-done .done-ic{margin:0 auto 18px}
.rz-done h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:10px}
.rz-done p{max-width:46ch;margin:0 auto 18px;color:var(--ink2)}
.rz-done-box{display:inline-flex;flex-direction:column;gap:4px;margin:0 auto 22px;padding:16px 26px;border-radius:var(--r);border:1px solid var(--gold);background:var(--gold-soft)}
.rz-done-box b{font:500 24px/1.2 var(--f-d);color:var(--ink)}
.rz-done-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rz-closed{padding:22px;border-radius:var(--r);border:1px solid var(--line2);text-align:center;color:var(--ink2)}
@media(max-width:1000px){.rz-grid{grid-template-columns:minmax(0,1fr)}.rz-side{order:2}}

/* ---------- Mutfak planlayıcı ---------- */
.pl-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,40px);align-items:start}
.pl-ctrl{padding:clamp(20px,2.6vw,32px)}
.pl-block{margin-bottom:26px}
.pl-layouts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pl-lay{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;border-radius:var(--r);border:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--ink2);transition:border-color .3s,background-color .3s,color .3s}
.pl-lay svg{width:44px;height:36px}
.pl-lay svg rect{fill:none;stroke:var(--ink3);stroke-width:1.2}
.pl-lay svg path{fill:var(--ink3)}
.pl-lay:hover{border-color:rgba(201,165,102,.5);color:var(--ink)}
.pl-lay.is-sel{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}
.pl-lay.is-sel svg path{fill:var(--gold)}
.pl-sw{display:flex;flex-wrap:wrap;gap:10px}
.pl-swatch{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);box-shadow:inset 0 0 0 3px var(--bg);transition:transform .3s var(--ease),border-color .3s}
.pl-swatch:hover{transform:scale(1.08)}
.pl-swatch.is-sel{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--bg),0 0 0 2px var(--gold)}
.pl-swatch span{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font-size:10.5px;white-space:nowrap;color:var(--ink3);opacity:0;transition:opacity .3s;pointer-events:none}
.pl-swatch:hover span,.pl-swatch.is-sel span{opacity:1}
.pl-sw{padding-bottom:18px}
.pl-view{position:sticky;top:calc(var(--hdr) + 16px)}
.pl-stage{padding:clamp(14px,2vw,22px)}
.pl-tabs{display:flex;gap:6px;margin-bottom:12px}
.pl-tabs button{padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);transition:.3s}
.pl-tabs button.is-on{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
.pl-canvas{position:relative;aspect-ratio:4/3;border-radius:var(--r);background:radial-gradient(circle at 50% 40%,#16130e,#0d0b08 70%);border:1px solid var(--line);overflow:hidden}
.pl-canvas svg{width:100%;height:100%}
.pl-canvas .pl-dim{font:600 11px var(--f-b);fill:var(--gold-hi);letter-spacing:.04em}
.pl-canvas .pl-lbl{font:600 9px var(--f-b);fill:rgba(20,17,12,.7);letter-spacing:.08em}
.pl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.pl-legend span{display:inline-flex;align-items:center;gap:6px}
.pl-legend i{width:12px;height:12px;border-radius:2px;border:1px solid var(--line2)}
.pl-price{margin-top:14px;padding:18px 20px;border-radius:var(--r);border:1px solid var(--gold);background:linear-gradient(120deg,rgba(201,165,102,.12),rgba(201,165,102,.03))}
.pl-price small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pl-price b{display:block;margin:6px 0 4px;font:500 clamp(26px,2.6vw,36px)/1.1 var(--f-d);color:var(--ink)}
.pl-price p{margin:0;font-size:12.5px;color:var(--ink3)}
.pl-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.pl-sum div{padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line)}
.pl-sum small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pl-sum b{font:500 19px/1.3 var(--f-d);color:var(--ink)}
.pl-cta{display:grid;gap:10px;margin-top:14px}
.pl-lead{margin-top:6px}
.pl-lead .field-row{margin-bottom:0}
.pl-ok{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
@media(max-width:1100px){.pl-grid{grid-template-columns:minmax(0,1fr)}.pl-view{position:static;order:-1}}
@media(max-width:560px){.pl-layouts{grid-template-columns:repeat(3,minmax(0,1fr))}.pl-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-canvas{aspect-ratio:1/1}}

/* ---------- İlçe sayfaları ---------- */
.bz-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start}
.bz-grid .prose{margin:0;max-width:none}
.bz-card{padding:clamp(22px,3vw,32px)}
.bz-card h3{font-size:clamp(21px,1.8vw,26px);margin-bottom:14px}
.bz-facts{display:grid;gap:12px;margin:0 0 20px;padding:0;list-style:none}
.bz-facts li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink2)}
.bz-facts .ic{width:18px;height:18px;color:var(--gold)}
.bz-facts b{color:var(--ink)}
.bz-act{display:grid;gap:10px}
.bz-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:bz}
.bz-steps li{padding:20px 18px;border-radius:var(--r);border:1px solid var(--line);counter-increment:bz}
.bz-steps li::before{content:"0" counter(bz);display:block;margin-bottom:10px;font:italic 400 22px/1 var(--f-d);color:var(--gold)}
.bz-steps b{display:block;margin-bottom:6px;color:var(--ink)}
.bz-steps span{font-size:13.5px;color:var(--ink3)}
.bz-near{display:flex;flex-wrap:wrap;gap:8px}
.bz-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.bz-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--line2);transition:border-color .3s,background-color .3s}
.bz-item:hover{border-color:var(--gold);background:var(--gold-soft)}
.bz-item b{display:block;font:500 22px/1.2 var(--f-d);color:var(--ink)}
.bz-item small{font-size:12.5px;color:var(--ink3)}
.bz-item .ic{color:var(--gold)}
@media(max-width:1000px){.bz-grid{grid-template-columns:minmax(0,1fr)}.bz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bz-steps{grid-template-columns:minmax(0,1fr)}}