#malzeme { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,5vw,72px); }
#malzeme .material-copy h2 { font:500 clamp(2.5rem,4.4vw,4.5rem)/1.1 Manrope,var(--sans); letter-spacing:-.05em; overflow-wrap:anywhere; }
#malzeme .material-copy h2 em { font:inherit; }
#malzeme .material-copy > p { font-size:1rem; line-height:1.75; }
#malzeme .material-choices { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
#malzeme .material-choices button { min-height:48px; padding:12px 22px; border:1px solid #b29b79; border-radius:28px; color:#f3f0e9; background:transparent; font-size:1rem; line-height:1.4; transition:background .2s,color .2s; }
#malzeme .material-choices button:hover { background:#302722; }
#malzeme .material-choices button[aria-pressed="true"] { color:#211c16; background:#d1ac77; border-color:#d1ac77; }
#malzeme button:focus-visible { outline:2px solid #f3f0e9; outline-offset:4px; }
#malzeme .material-study { min-width:0; width:100%; max-width:660px; justify-self:center; }
#malzeme .material-viewport { position:relative; isolation:isolate; width:100%; height:clamp(420px,38vw,510px); overflow:hidden; border:1px solid #d1ac7729; border-radius:28px; background:radial-gradient(ellipse at 52% 38%,#55493966,transparent 68%),linear-gradient(155deg,#242729,#171b1d 75%); }
#malzeme .material-study-label { position:absolute; top:22px; left:24px; z-index:1; color:#d1ac77; letter-spacing:.14em; font-size:.625rem; pointer-events:none; }
#malzeme canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
#malzeme canvas:active { cursor:grabbing; }
#malzeme [hidden] { display:none !important; }
#malzeme .material-scene-status { position:absolute; inset:40% 24px auto; margin:0; text-align:center; color:#ded7cd; font-size:.9375rem; line-height:1.65; }
#malzeme .material-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; }
#malzeme .material-tools > span { color:#ded7cd; font-size:.75rem; }
#malzeme .material-orbit { display:flex; gap:8px; }
#malzeme .material-orbit button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #d1ac7755; border-radius:50%; background:#252827; color:#eddfc8; font-size:1.2rem; transition:background .2s,color .2s; }
#malzeme .material-orbit button:hover { color:#211c16; background:#d1ac77; }
#malzeme .material-descriptions { padding-top:20px; min-height:142px; }
#malzeme .material-panel h3 { margin:0; color:#f3f0e9; font:500 1.5rem/1.25 Manrope,var(--sans); letter-spacing:-.03em; }
#malzeme .material-panel p { margin:12px 0 0; color:var(--muted); font-size:.9375rem; line-height:1.7; max-width:54ch; }
@media (max-width:800px) {
  #malzeme { grid-template-columns:minmax(0,1fr); }
  #malzeme .material-study { max-width:560px; }
  #malzeme .material-descriptions { min-height:0; }
}
@media (max-width:480px) {
  #malzeme .material-choices button { flex:1 1 130px; padding-inline:16px; }
  #malzeme .material-viewport { height:390px; border-radius:22px; }
  #malzeme .material-study-label { left:18px; top:18px; }
}
@media (prefers-reduced-motion:reduce) { #malzeme button { transition:none !important; } }