/* Tempa Reklam — Kutu Harf Kataloğu (tek ekran, etkileşimli) */
:root{--or:#ef7d32;--or2:#ffad70;--bg:#0d0e10;--pn:#1c1d20;--ln:#323438;--tx:#f5f3ee;--mu:#c0c2c7}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font:14px/1.35 "Segoe UI",Arial,sans-serif}
body{padding:4px 8px 8px}
button,select{font:inherit}
.shell{height:calc(100dvh - 12px);display:grid;grid-template-rows:56px minmax(0,1fr) clamp(104px,15vh,146px);gap:6px}

/* üst çubuk */
header{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(0,2fr);align-items:center;gap:14px;border-bottom:1px solid #28292c;padding-bottom:5px;min-width:0}
.brandSlot{width:clamp(170px,14.5vw,260px);height:clamp(40px,5vh,52px);display:flex;align-items:center}
.brandSlot img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.headerIdentity{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.headerIdentity strong{font-size:clamp(14px,1.3vw,21px);line-height:1.1}
.headerIdentity span{font-size:clamp(10px,.85vw,14px);color:var(--or2);letter-spacing:.7px}
.topNav{justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
.navBtn,.select{height:36px;border:1px solid #3b3d42;background:#1d1e21;color:#f0f0f0;border-radius:9px;padding:0 13px;font-size:12px;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}
.navBtn:hover,.select:hover{border-color:#77797d}
.select{font-weight:700;min-width:250px}
.arrows{width:36px;padding:0;font-size:20px;font-weight:700}

/* orta alan */
.main{display:grid;grid-template-columns:.92fr 1.08fr;gap:9px;min-height:0}
.hero{position:relative;min-width:0;min-height:0;border:1px solid var(--ln);border-radius:13px;overflow:hidden;background:#111214;isolation:isolate}
.heroVisual{position:absolute;z-index:0;top:50%;right:0;width:112%;height:auto;aspect-ratio:16/10;transform:translateY(-50%);object-fit:cover;pointer-events:none;transition:opacity .25s;-webkit-mask-image:linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent)}
.heroShade{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,#111214f2 0%,#111214c8 36%,#11121440 54%,transparent 68%),linear-gradient(0deg,#11121430,transparent 35%)}
.heroCopy{position:relative;z-index:2;width:54%;height:100%;padding:clamp(10px,2vh,24px) clamp(12px,1.5vw,22px);display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:clamp(9px,.75vw,13px);color:var(--or);letter-spacing:3px;font-weight:800;margin-bottom:clamp(7px,1.4vh,15px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.codeTag{display:inline-flex;padding:4px 9px;border:1px solid #ff9a5055;border-radius:999px;background:#151619c9;color:#ffb174;font-size:clamp(9px,.75vw,13px);letter-spacing:.4px;white-space:nowrap}
.hero h1{font-size:clamp(26px,2.7vw,46px);line-height:1.03;letter-spacing:-1.2px;margin:0 0 clamp(8px,1.5vh,17px)}
.hero h1 span{display:block;color:#ffb174}
.desc{font-size:clamp(10px,1vw,16px);line-height:1.42;color:#f2f0ec;margin:0 0 clamp(8px,1.5vh,18px);max-width:560px}
.specs{display:grid;gap:clamp(4px,1vh,10px);max-width:590px}
.spec{font-size:clamp(9px,.88vw,14px);line-height:1.34;padding:1px 0 5px;border-bottom:1px solid #ffffff24;color:#f1eee8}
.spec b{display:inline-block;min-width:clamp(90px,10vw,145px);font-size:clamp(8px,.7vw,11px);letter-spacing:1px;margin-right:9px;color:#ff9a50}
.heroBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(8px,1.4vh,16px)}
.offer{padding:8px 12px;background:var(--or);color:#1d140e;text-decoration:none;border-radius:6px;font-size:clamp(9px,.8vw,13px);font-weight:800;box-shadow:0 4px 14px #ef7d3230}
.offer.ghost{background:transparent;color:#ffb174;border:1px solid #ff9a5066;box-shadow:none}
.offer:hover{filter:brightness(1.1)}

.viewer{position:relative;min-width:0;min-height:0;background:var(--pn);border:1px solid var(--ln);border-radius:13px;padding:8px 10px 6px;display:grid;grid-template-rows:32px minmax(0,1fr) 40px;gap:5px}
.viewerTop{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.tabs{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tab{height:30px;border:1px solid #3b3d41;background:#202124;color:#d8d9dc;border-radius:6px;padding:0 10px;font-size:clamp(9px,.7vw,11px);font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;display:flex;align-items:center}
.tab.active{background:#30251d;border-color:var(--or);color:#ffae75}
.tab.design{background:var(--or);border-color:var(--or);color:#20150d}
.stage{position:relative;min-height:0;border-radius:8px;overflow:hidden}
.panel{position:absolute;inset:0}.panel[hidden]{display:none}
.canvas{background:radial-gradient(ellipse at 50% 55%,#333539,#202124 58%,#191a1d 85%);touch-action:none}
.canvas.night{background:radial-gradient(ellipse at 50% 53%,#2b2620,#1a1918 52%,#121314 84%)}
model-viewer{width:100%;height:100%;--poster-color:transparent;--progress-bar-color:var(--or)}
.dragText{position:absolute;z-index:2;left:12px;top:10px;font-size:10px;color:#c5c7cc;pointer-events:none}
.mvYuk{position:absolute;inset:0;display:grid;place-items:center;color:#c9c6bf;font-size:12px;pointer-events:none}.mvYuk[hidden]{display:none}
.controls{display:flex;align-items:center;gap:10px;min-width:0}
.viewButtons{display:flex;gap:6px;flex-shrink:0}
.viewBtn{border:1px solid #45474c;background:#222326;color:#f0efec;border-radius:6px;padding:7px 9px;font-size:clamp(9px,.7vw,11px);font-weight:700;cursor:pointer;white-space:nowrap}
.viewBtn.active{background:var(--or);border-color:var(--or);color:#21160f}
.acKapa{display:flex;align-items:center;gap:8px;font-size:clamp(9px,.7vw,11px);color:#ddd;min-width:0}
.acKapa input{accent-color:var(--or);width:clamp(80px,9vw,150px)}
.whatsappBtn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;border:1px solid #27b267;background:#146b43;color:#f5fff9;text-decoration:none;font-size:clamp(9px,.75vw,12px);font-weight:800;white-space:nowrap}
.whatsappBtn:hover{background:#198653}
.videoPanel{background:#000;display:grid;place-items:center}
.videoPanel video,.videoPanel iframe{width:100%;height:100%;object-fit:contain;border:0;background:#000}
.ornekPanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;overflow:auto;padding:4px;background:#17181a}
.ornekPanel img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;cursor:zoom-in}
.bos{display:grid;place-items:center;text-align:center;color:#bdb9b0;font-size:13px;padding:20px;background:#17181a}
.bos b{display:block;color:#ffb174;font-size:15px;margin-bottom:6px}

/* model şeridi: sabit genişlikte kartlar, sığmazsa yana kayar */
.models{background:var(--pn);border:1px solid var(--ln);border-radius:13px;padding:7px 9px;display:flex;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:#ef7d32 #25262a}
.modelIntro{flex:0 0 150px;display:flex;flex-direction:column;justify-content:center}
.modelIntro strong{font-size:clamp(11px,1.1vw,17px);color:var(--or);letter-spacing:1.5px}
.modelIntro span{font-size:clamp(8px,.7vw,11px);color:#d0d2d6;margin-top:6px;line-height:1.25}
.model{flex:0 0 172px;width:172px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px;background:#25262a;border:1px solid #3a3c41;border-radius:9px;padding:4px;cursor:pointer;color:#f4f2ee;text-align:left;min-height:0}
.model:hover{border-color:#888}
.model.selected{border:2px solid var(--or);padding:3px;background:#30241b}
.modelArt{border-radius:6px;background:#141517 center/cover no-repeat;min-height:0}
.modelLabel{font-size:10px;line-height:1.15;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modelLabel b{display:block;color:#ff9a56;font-size:10px;margin-top:2px}
.toast{position:fixed;z-index:10;bottom:18px;left:50%;transform:translate(-50%,10px);opacity:0;transition:.2s;background:#27282b;border:1px solid #555;color:#f5efe3;padding:9px 13px;border-radius:6px;font-size:11px;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.lightbox{position:fixed;inset:0;z-index:20;background:#000d;display:grid;place-items:center;cursor:zoom-out}.lightbox[hidden]{display:none}.lightbox img{max-width:94vw;max-height:94vh}

@media(max-width:1100px){
  .shell{grid-template-rows:auto minmax(0,1fr) clamp(96px,14vh,124px)}
  header{grid-template-columns:minmax(90px,.8fr) auto minmax(0,2fr);gap:6px}
  .brandSlot{width:100%;max-width:150px;height:40px}
  .topNav{gap:4px}.navBtn{padding:0 7px;font-size:11px}.select{min-width:170px}
  .heroCopy{width:67%}.spec b{min-width:86px}
}
/* telefon / dar ekran: alt alta, sayfa kayar */
@media(max-width:820px){
  html,body{overflow:auto;height:auto}
  body{padding:6px}
  .shell{height:auto;display:flex;flex-direction:column;gap:8px}
  header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
  .brandSlot{height:34px;max-width:120px}
  .headerIdentity{order:2;align-items:flex-end}
  .topNav{order:3;width:100%;justify-content:space-between}
  .select{flex:1;min-width:0}
  .navBtn.metin{display:none}
  .main{display:flex;flex-direction:column-reverse;gap:8px}
  .viewer{height:min(78vh,560px);grid-template-rows:auto minmax(0,1fr) auto}
  .controls{flex-wrap:wrap;gap:6px}
  .whatsappBtn{margin-left:0}
  .hero{min-height:0}
  .heroVisual{position:relative;display:block;top:0;transform:none;height:auto;width:100%;aspect-ratio:16/10;object-fit:cover}
  .heroShade{display:none}
  .heroVisual{-webkit-mask-image:none;mask-image:none}
  .heroCopy{width:100%;height:auto;padding:14px}
  .hero h1{font-size:30px}.desc{font-size:14px}.spec{font-size:13px}.spec b{font-size:11px;min-width:110px}.offer{font-size:13px}
  .models{height:136px;flex:0 0 auto;order:1}
  .main{order:2}
  .modelIntro{flex-basis:96px}
  .model{flex-basis:140px;width:140px}
  .navBtn.metin.ust{display:flex}
}