/* ══════════════════════════════════════════════════════════
   Semih Bora Saraç — vintage cabinet radio
   Walnut cabinet · brushed brass faceplate · lit dial · YT screen
   ══════════════════════════════════════════════════════════ */

.cab{
  --wood-1:#6b3d21; --wood-2:#4a2a17; --wood-3:#2e1809; --wood-hi:#8d5730;
  --brass-1:#e2cb98; --brass-2:#b8975d; --brass-3:#8a6c3a; --brass-4:#5e4826;
  --glow:#f0c96a;

  position:relative;
  border-radius:18px 18px 12px 12px;
  padding:clamp(1rem,2.5vw,2.4rem) clamp(1.1rem,3vw,2.8rem) clamp(1.4rem,3.2vw,3rem);
  background:
    linear-gradient(178deg,var(--wood-hi) 0%,var(--wood-1) 7%,var(--wood-2) 55%,var(--wood-3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,214,170,.22),
    inset 0 -18px 30px -18px rgba(0,0,0,.85),
    0 2px 0 rgba(0,0,0,.5),
    0 40px 80px -40px rgba(0,0,0,.95),
    0 90px 120px -70px rgba(0,0,0,.8);
  isolation:isolate;
}
/* wood grain */
.cab::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.30) 0 2px, rgba(255,190,130,.09) 2px 5px,
      rgba(0,0,0,.18) 5px 9px, rgba(255,190,130,.05) 9px 15px,
      rgba(0,0,0,.24) 15px 17px, rgba(255,190,130,.04) 17px 23px);
  mix-blend-mode:overlay;opacity:1;
}
/* top sheen */
.cab::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(184deg,rgba(255,226,190,.20) 0%,transparent 26%,transparent 72%,rgba(0,0,0,.34) 100%);
}

/* ── brass faceplate ───────────────────────────────────── */
.face{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(132px,.62fr) minmax(0,1.9fr) minmax(126px,.68fr);
  gap:clamp(.75rem,1.6vw,1.6rem);
  align-items:center;
  padding:clamp(.9rem,2vw,1.6rem);
  border-radius:8px;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.05) 1px 3px),
    linear-gradient(120deg,var(--brass-3) 0%,var(--brass-1) 22%,var(--brass-2) 46%,
                    var(--brass-1) 68%,var(--brass-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.45),
    inset 0 0 0 5px rgba(94,72,38,.6),
    inset 0 4px 16px rgba(255,247,220,.36),
    inset 0 -12px 26px rgba(70,48,20,.55),
    0 0 0 1px rgba(30,16,6,.85),
    0 6px 18px rgba(0,0,0,.75),
    0 1px 0 rgba(255,214,170,.18);
}
/* corner rosettes */
.face .rose{position:absolute;width:16px;height:16px;color:rgba(94,72,38,.65)}
.face .rose:nth-of-type(1){top:8px;left:8px}
.face .rose:nth-of-type(2){top:8px;right:8px;transform:scaleX(-1)}
.face .rose:nth-of-type(3){bottom:8px;left:8px;transform:scaleY(-1)}
.face .rose:nth-of-type(4){bottom:8px;right:8px;transform:scale(-1)}
.face .rose svg{width:100%;height:100%;fill:currentColor}

/* ── left control column ───────────────────────────────── */
.ctrls{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1.3vw,1rem)}
.ctrl{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.ctrl__lbl{
  font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:#3f2f14;text-shadow:0 1px 0 rgba(255,240,205,.5);white-space:nowrap;
}
.ctrl-row{display:flex;gap:clamp(.5rem,1.3vw,1rem);align-items:flex-start}

/* knobs */
.knob{
  --deg:-135deg;
  width:var(--kb,64px);height:var(--kb,64px);border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,#5c5c5c 0%,#2c2c2c 42%,#141414 74%,#0a0a0a 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.30), inset 0 -4px 8px rgba(0,0,0,.9),
    0 4px 9px rgba(0,0,0,.65), 0 0 0 3px rgba(94,72,38,.5), 0 0 0 4px rgba(226,203,152,.45);
  display:grid;place-items:center;cursor:grab;position:relative;
  touch-action:none;border:0;padding:0;
}
.knob:active{cursor:grabbing}
.knob--lg{--kb:clamp(56px,6vw,74px)}
.knob--sm{--kb:clamp(36px,3.6vw,46px)}
.knob__face{
  width:64%;height:64%;border-radius:50%;
  background:linear-gradient(145deg,var(--brass-1),var(--brass-3));
  box-shadow:inset 0 1px 2px rgba(255,248,225,.8),inset 0 -2px 4px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5);
  display:grid;place-items:center;transform:rotate(var(--deg));transition:transform .12s ease-out;
}
.knob__mark{width:2px;height:38%;background:#241505;border-radius:2px;
  transform:translateY(-32%);box-shadow:0 0 1px rgba(255,240,205,.6)}
.knob:focus-visible{outline:2px solid var(--glow);outline-offset:5px}
/* knurled ring of ticks */
.knob__ticks{position:absolute;inset:-9px;border-radius:50%;
  background:repeating-conic-gradient(rgba(60,44,20,.85) 0 2deg,transparent 2deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 0 52%,#000 52% 58%,transparent 58%);
          mask:radial-gradient(circle,transparent 0 52%,#000 52% 58%,transparent 58%);
  pointer-events:none}

/* power toggle */
.toggle{
  width:34px;height:52px;border-radius:7px;border:0;padding:0;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#3a3a3a,#151515);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.85),
             0 3px 7px rgba(0,0,0,.6),0 0 0 3px rgba(94,72,38,.5);
}
.toggle__lever{
  position:absolute;left:50%;top:7px;width:13px;height:26px;border-radius:7px;
  transform:translateX(-50%);transform-origin:50% 100%;
  background:linear-gradient(180deg,#f2e6c8,var(--brass-2) 60%,var(--brass-4));
  box-shadow:0 3px 6px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.8);
  transition:transform .22s cubic-bezier(.3,1.5,.5,1);
}
.toggle[aria-checked="true"] .toggle__lever{transform:translateX(-50%) translateY(17px) rotate(180deg)}
.toggle:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
.toggle__mk{position:absolute;left:calc(100% + 6px);font-family:var(--mono);font-size:.5rem;
  letter-spacing:.14em;color:#3f2f14;text-shadow:0 1px 0 rgba(255,240,205,.5)}
.toggle__mk--on{top:4px}.toggle__mk--off{bottom:4px}

/* ── centre: dial + screen ─────────────────────────────── */
.center{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vw,1rem);min-width:0}

.dial{
  position:relative;border-radius:14px 14px 46% 46%/14px 14px 60px 60px;
  padding:2px;background:linear-gradient(180deg,var(--brass-1),var(--brass-4));
  box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,248,225,.7);
}
.dial__glass{
  position:relative;overflow:hidden;
  border-radius:12px 12px 46% 46%/12px 12px 58px 58px;
  padding:clamp(.42rem,1vw,.62rem) clamp(2rem,5vw,3.6rem) clamp(.85rem,1.9vw,1.35rem);
  background:
    radial-gradient(120% 150% at 50% -30%,#fff5cf 0%,#f3d894 34%,#d9ab52 78%,#b98736 100%);
  box-shadow:inset 0 0 22px rgba(255,214,120,.9),inset 0 -6px 14px rgba(120,74,16,.45),
             0 0 26px rgba(240,201,106,.18);
}
.radio.is-on .dial__glass{box-shadow:inset 0 0 30px rgba(255,226,150,1),
  inset 0 -6px 14px rgba(120,74,16,.4),0 0 46px rgba(240,201,106,.42)}
.dial__band{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:clamp(.52rem,1.05vw,.72rem);letter-spacing:.06em;
  color:#4a2f08;font-weight:400;
}
.dial__band b{font-weight:400;font-size:.82em;opacity:.75}
.dial__ticks{
  height:9px;margin:.16rem 0 .1rem;
  background:repeating-linear-gradient(90deg,rgba(74,47,8,.85) 0 1px,transparent 1px 10px),
             repeating-linear-gradient(90deg,rgba(74,47,8,.5) 0 1px,transparent 1px 5px);
  background-size:100% 100%,100% 55%;background-repeat:repeat-x;background-position:0 0,0 100%;
}
.dial__needle{
  position:absolute;top:6%;bottom:14%;width:2px;left:0;
  background:linear-gradient(180deg,#c0392b,#7d1d12);
  box-shadow:0 0 7px 1px rgba(200,60,40,.75);border-radius:2px;
  transition:left .75s cubic-bezier(.22,.61,.36,1);
}
.dial__needle::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#c0392b;box-shadow:0 0 8px rgba(200,60,40,.9)}

/* screen with ornate brass surround */
.screenframe{
  position:relative;padding:clamp(1.15rem,2.4vw,1.7rem) clamp(.5rem,1.2vw,.85rem);
  border-radius:10px;
  background:linear-gradient(150deg,var(--brass-1) 0%,var(--brass-3) 40%,var(--brass-2) 70%,var(--brass-4) 100%);
  box-shadow:inset 0 1px 0 rgba(255,248,225,.75),inset 0 -3px 8px rgba(60,40,12,.6),
             0 4px 12px rgba(0,0,0,.55);
}
.screenframe__cap{
  position:absolute;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;
  color:#3f2f14;text-shadow:0 1px 0 rgba(255,244,215,.6);
}
.screenframe__cap--t{top:clamp(.28rem,.8vw,.5rem)}
.screenframe__cap--b{bottom:clamp(.28rem,.8vw,.5rem);transition:color .4s,text-shadow .4s}
.radio.is-on .screenframe__cap--b{color:#7d2a10;text-shadow:0 0 9px rgba(230,120,40,.8)}
.screen{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#000;
  box-shadow:inset 0 0 0 2px rgba(46,30,10,.9),inset 0 0 26px rgba(0,0,0,.95),
             0 0 0 1px rgba(255,240,205,.35);
}
.screen>div,.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* glass reflection over the screen, never blocking clicks */
.screen::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(114deg,rgba(255,255,255,.13) 0%,transparent 32%,transparent 76%,rgba(255,255,255,.05) 100%);
}

/* ── speaker ───────────────────────────────────────────── */
.speaker{
  position:relative;aspect-ratio:1;width:100%;max-width:270px;justify-self:center;border-radius:50%;
  background:linear-gradient(145deg,var(--brass-1),var(--brass-3) 55%,var(--brass-4));
  box-shadow:inset 0 2px 0 rgba(255,248,225,.7),inset 0 -6px 14px rgba(60,40,12,.65),
             0 5px 14px rgba(0,0,0,.55);
  display:grid;place-items:center;
}
.speaker::before{ /* ornate engraved ring */
  content:'';position:absolute;inset:6%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(60,42,14,.55) 0 1.6deg,transparent 1.6deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 82%,#000 82% 100%);
          mask:radial-gradient(circle,transparent 0 82%,#000 82% 100%);
}
.speaker__mesh{
  width:74%;height:74%;border-radius:50%;
  background:
    repeating-linear-gradient(45deg,rgba(38,22,6,.92) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(38,22,6,.92) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 38% 32%,#a9803f 0%,#6d4c1e 55%,#3b2609 100%);
  box-shadow:inset 0 0 22px rgba(0,0,0,.9),inset 0 2px 4px rgba(255,220,160,.25),
             0 0 0 4px rgba(94,72,38,.7),0 0 0 6px rgba(226,203,152,.5);
  transition:transform .18s ease-out;
}
.radio.is-on .speaker__mesh{animation:cone 1.9s ease-in-out infinite}
@keyframes cone{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

/* ── cabinet top vents ─────────────────────────────────── */
.cab__vents{position:relative;z-index:1;display:flex;justify-content:space-between;
  padding:0 clamp(.5rem,3vw,2.5rem) clamp(.9rem,1.8vw,1.35rem)}
.vent{
  width:clamp(70px,16%,140px);height:clamp(9px,1.2vw,14px);border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--brass-3) 0 2px,rgba(30,18,6,.9) 2px 4px);
  box-shadow:inset 0 0 0 1px rgba(226,203,152,.55),0 1px 2px rgba(0,0,0,.6);
}

/* ── responsive ────────────────────────────────────────── */
@media(max-width:900px){
  .face{grid-template-columns:1fr 1fr;gap:1rem}
  .center{grid-column:1 / -1;order:-1}
  .ctrls{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:1rem}
  .ctrl-row{gap:.9rem}
  .speaker{max-width:150px}
}
@media(max-width:560px){
  .face{grid-template-columns:1fr;padding:.85rem}
  .speaker{display:none}
  .ctrls{gap:.9rem}
  .knob--lg{--kb:58px}
  .knob--sm{--kb:40px}
  .cab__vents{padding-inline:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .radio.is-on .speaker__mesh{animation:none}
  .dial__needle,.knob__face,.toggle__lever{transition:none}
}