/* çizgikokpit.com — tek sayfa bağlantı sitesi. Tasarım: YouTube bannerı (gökyüzü, mürekkep konturlar, kanal mavisi). */
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("font/Inter-Bold.otf") format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("font/Inter-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 900; font-display: swap; src: url("font/Inter-Black.otf") format("opentype"); }

:root {
  --murekkep: #1d1d1f;
  --gok1: #8fc6ff;
  --gok2: #e6f3ff;
  --vurgu: #2f6fde;
  --lacivert: #1d3557;
  --kirmizi: #e5383b;
  --kart: #ffffff;
  --kontur: 4px;
  --golge: 6px 6px 0 var(--murekkep);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--murekkep);
  background: linear-gradient(180deg, var(--gok1) 0%, var(--gok2) 100%) fixed;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* ---------- gökyüzü süsleri ---------- */
.gok { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bulut { position: absolute; opacity: .92; width: 220px; animation: suzul linear infinite; }
.b1 { top: 8%;  width: 260px; animation-duration: 70s; animation-delay: -10s; }
.b2 { top: 30%; width: 180px; animation-duration: 90s; animation-delay: -55s; }
.b3 { top: 62%; width: 300px; animation-duration: 110s; animation-delay: -30s; }
.b4 { top: 82%; width: 200px; animation-duration: 80s; animation-delay: -70s; }
.b5 { top: 48%; width: 140px; animation-duration: 60s; animation-delay: -20s; }
@keyframes suzul { from { transform: translateX(110vw); } to { transform: translateX(-340px); } }

.ucak { position: absolute; }
.ucak img { display: block; width: 100%; height: auto; }
.ucak { animation: sallan 6s ease-in-out infinite; }
@keyframes sallan { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* kesikli beyaz iz (bannerdaki gibi) */
.iz { position: absolute; right: 96%; top: 50%; width: 14vw; height: 0; border-top: 6px dashed rgba(255,255,255,.85); }

/* masaüstü yerleşimi: kenarlarda filo */
.u-x15  { left: 3%;  top: 14%; width: clamp(140px, 13vw, 230px); rotate: -12deg; }
.u-sr71 { left: 2%;  top: 70%; width: clamp(200px, 19vw, 340px); rotate: 4deg; animation-delay: -2s; }
.u-747  { right: 4%; top: 12%; width: clamp(220px, 22vw, 380px); rotate: -5deg; animation-delay: -1s; }
.u-f16   { right: 6%; top: 66%; width: clamp(170px, 16vw, 280px); animation-delay: -3s; }

/* ---------- orta kart ---------- */
.kart { position: relative; z-index: 1; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 26px; }

.baslik { position: relative; text-align: center; }
.marka { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.logo { width: 96px; height: 96px; border-radius: 50%; filter: drop-shadow(4px 4px 0 rgba(29,29,31,.25)); }
h1 {
  margin: 0; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(44px, 11vw, 84px);
  color: var(--murekkep);
  text-shadow: 0 3px 0 #fff;
}
.slogan { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; font-weight: 800; }
.hap { background: var(--vurgu); color: #fff; border: var(--kontur) solid var(--murekkep); border-radius: 999px; padding: 6px 16px; font-size: 17px; }
.her-gun { color: var(--lacivert); font-size: 18px; }

/* selam veren pilot: geniş ekranda başlığın solunda */
.pilot { position: absolute; left: -120px; bottom: 4px; width: 96px; height: auto; }

/* ---------- bağlantı düğmeleri ---------- */
.baglantilar { display: flex; flex-direction: column; gap: 16px; }
.bag {
  display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; gap: 14px;
  min-height: 78px; padding: 12px 18px;
  background: var(--kart); color: var(--murekkep); text-decoration: none;
  border: var(--kontur) solid var(--murekkep); border-radius: 22px;
  box-shadow: var(--golge);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bag:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--murekkep); }
.bag:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--murekkep); }
.bag:focus-visible { outline: 4px solid var(--vurgu); outline-offset: 4px; }
.ikon { width: 56px; height: 56px; border-radius: 16px; border: 3px solid var(--murekkep); display: grid; place-items: center; }
.ikon svg { width: 36px; height: 36px; }
.yt .ikon { background: #fff; }
.yt .ikon rect { fill: #ff0033; }
.ig .ikon { background: radial-gradient(circle at 30% 110%, #ffd776 0%, #f77737 30%, #e1306c 60%, #833ab4 100%); }
.mail .ikon { background: var(--vurgu); }
.yazi small { overflow-wrap: anywhere; }
.yazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yazi strong { font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.yazi small { font-size: 15px; font-weight: 700; color: #5a6270; }
.ok { font-size: 34px; font-weight: 800; line-height: 1; color: var(--vurgu); justify-self: end; }

.alt { text-align: center; font-size: 13px; font-weight: 700; color: var(--lacivert); opacity: .8; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .pilot { left: -96px; width: 80px; }
  .u-x15 { top: 6%; } .u-747 { top: 5%; } .u-sr71 { top: 82%; } .u-f16 { top: 80%; }
}
@media (max-width: 860px) {
  .pilot { display: none; }
  .u-x15 { width: 120px; left: 2%; top: 4%; }
  .u-747 { width: 220px; right: 2%; top: 3%; }
  .u-sr71 { width: 200px; left: -2%; top: auto; bottom: 3%; }
  .u-f16 { width: 170px; right: 1%; top: auto; bottom: 4%; }
}

/* ---------- telefon: tek sütun, üstte uçan 747, altta pilot ---------- */
@media (max-width: 560px) {
  body { align-items: flex-start; padding-top: max(118px, calc(env(safe-area-inset-top) + 104px)); }
  .u-x15, .u-sr71, .u-f16 { display: none; }
  .u-747 { width: 230px; right: auto; left: 50%; margin-left: -115px; top: 18px; rotate: -4deg; }
  .u-747 .iz { width: 22vw; }
  .kart { gap: 22px; }
  .logo { width: 80px; height: 80px; }
  .bag { min-height: 72px; grid-template-columns: 50px 1fr 20px; padding: 10px 14px; border-radius: 20px; }
  .ikon { width: 50px; height: 50px; border-radius: 14px; }
  .ikon svg { width: 32px; height: 32px; }
  .yazi strong { font-size: 19px; }
  .yazi small { font-size: 14px; }
}

/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .bulut, .ucak { animation: none; }
  .bulut.b1 { left: 8%; } .bulut.b2 { left: 70%; } .bulut.b3 { left: 30%; } .bulut.b4 { left: 75%; } .bulut.b5 { left: 5%; }
}

/* telif notu */
.alt small { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; opacity: .85; }
.ucak img, .pilot { -webkit-user-drag: none; user-select: none; }