/* reiner.dropjet.com.tr — REINER video ve broşür merkezi (16 Eki 2026). dropJET kurumsal kimliği: lacivert #0E1A27, kırmızı #E30613 vurgu, altın #B98A2E, kum #C9B79A/#EFE8DC, kırık beyaz #F9F8F7. Montserrat başlık, Inter gövde. */
:root { color-scheme: light; --bg:#F9F8F7; --card:#fff; --fg:#231F20; --muted:#6E6A64; --line:#E5DED2; --soft:#EFE8DC; --soft2:#F6F2EA; --navy:#0E1A27; --navy2:#1B2B3C; --red:#E30613; --gold:#B98A2E; --sand:#C9B79A;
  --head:'Montserrat', system-ui, sans-serif; --body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box } html,body { height:100% }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.5; display:flex; flex-direction:column; min-height:100vh }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 20px }
.top { background:var(--navy); color:#fff; border-bottom:3px solid var(--red); padding:calc(18px + env(safe-area-inset-top,0px)) 0 16px }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand img { height:58px; width:auto; display:block } @media (max-width:480px) { .brand img { height:46px } }
.tag { text-align:right; line-height:1.2 } .tag b { display:block; font-family:var(--head); font-size:18px; letter-spacing:.14em } .tag span { font-size:12px; opacity:.85 }
.hero { padding:40px 0 10px } .hero h1 { font-family:var(--head); font-size:34px; line-height:1.15; margin:0 0 12px; color:var(--navy); letter-spacing:-.01em } .hero p { max-width:720px; color:var(--muted); margin:0 0 18px; font-size:17px }
@media (max-width:600px) { .hero h1 { font-size:26px } }
.chips { display:flex; flex-wrap:wrap; gap:8px } .chip { border:1px solid var(--sand); background:#fff; color:var(--fg); border-radius:999px; padding:9px 16px; font:inherit; font-size:14px; cursor:pointer } .chip[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy) }
.sec { padding:26px 0 6px } .sec h2 { font-family:var(--head); font-size:22px; color:var(--navy); margin:0 0 6px } .muted { color:var(--muted); margin:0 0 14px; font-size:15px }
.grid { display:grid; gap:16px; margin-top:12px } .grid.wide { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) } .grid.tall { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) }
@media (max-width:480px) { .grid.tall { grid-template-columns:repeat(2, 1fr); gap:10px } }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s }
.card:hover { box-shadow:0 10px 28px rgba(14,26,39,.14); transform:translateY(-2px) } .card:focus-visible { outline:3px solid var(--red); outline-offset:2px }
.card[hidden] { display:none }
.thumb { position:relative; background:#111; aspect-ratio:16/9 } .grid.tall .thumb { aspect-ratio:9/16 }
.thumb img { width:100%; height:100%; object-fit:cover; display:block }
.thumb .play { position:absolute; inset:0; display:grid; place-items:center } .thumb .play i { width:58px; height:58px; border-radius:50%; background:rgba(14,26,39,.82); border:2px solid #fff; display:grid; place-items:center; color:#fff; font-size:22px; font-style:normal; padding-left:4px }
.thumb .dur { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 7px; border-radius:6px }
.body { padding:12px 14px 14px } .body b { display:block; font-family:var(--head); font-size:15px; color:var(--navy); line-height:1.3 } .body small { display:block; color:var(--muted); font-size:13px; margin-top:4px }
.devs { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px } .dev { font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--soft); color:var(--navy); letter-spacing:.02em }
.docs { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); margin-top:12px }
.doc { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; text-decoration:none; color:inherit }
.doc:hover { border-color:var(--navy) } .doc .ic { width:42px; height:42px; border-radius:10px; background:var(--soft); display:grid; place-items:center; color:var(--red); font-family:var(--head); font-weight:700; font-size:12px; flex:none }
.doc b { display:block; font-family:var(--head); font-size:14px; color:var(--navy) } .doc small { color:var(--muted); font-size:12px }
.doc[hidden] { display:none }
.cta { margin:34px 0 10px; background:var(--navy); color:#fff; border-radius:18px; padding:28px 24px; border-left:6px solid var(--red) } .cta h2 { font-family:var(--head); margin:0 0 8px; font-size:22px } .cta p { margin:0 0 16px; opacity:.9; max-width:720px }
.btns { display:flex; flex-wrap:wrap; gap:10px } .btn { display:inline-block; background:#fff; color:var(--navy); font-family:var(--head); font-weight:600; font-size:14px; padding:12px 18px; border-radius:10px; text-decoration:none } .btn.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55) }
.foot { margin-top:auto; padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px)); font-size:12px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border-top:1px solid var(--line); background:var(--soft2) } .foot img { height:40px }
.modal { position:fixed; inset:0; background:rgba(14,26,39,.92); display:grid; place-items:center; padding:16px; z-index:50 } .modal[hidden] { display:none }
.mbox { width:min(96vw, 1000px); max-height:94vh; display:flex; flex-direction:column; gap:8px } .mbox video { width:100%; max-height:82vh; background:#000; border-radius:12px; outline:none }
.mbox.tall { width:min(96vw, 440px) }
.mtitle { color:#fff; font-family:var(--head); font-size:15px } .close { align-self:flex-end; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; width:40px; height:40px; border-radius:50%; font-size:24px; cursor:pointer; line-height:1 }
.empty { color:var(--muted); font-size:14px; padding:10px 0 }