/* DC Yacht App ürün sayfası — mockup bileşenleri (mavi palet eşlemesi) */
:root {
  --orange: #2563EB; --sea: #1D4ED8; --ink: #0F172A; --ok: #10B981;
  --paper: #F8FAFC; --cream: #ffffff;
  --font-mono: "JetBrains Mono", monospace;
}
/* Not: --mute, --line, --font-display, --font-body kurumsal.css'ten gelir */


.app-top { background: var(--ink); color: #fff; padding: 24px 14px 12px; }


.app-top .app-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; }


.app-top .app-sub { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-top: 3px; }



.task-card { background: #fff; margin: 8px 10px; padding: 10px 12px; border: 1px solid #e3e6ec; border-left: 3px solid var(--ok); }


.task-card.wip-b { border-left-color: #e8a713; }


.task-card.new-b { border-left-color: var(--sea); }


.task-card .t-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }


.task-card .t-title { font-weight: 600; font-size: 11px; }


.task-card .t-sub { font-size: 9px; color: #7b8698; }


.pill { font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.06em; padding: 2.5px 7px; }


.pill.done { background: rgba(26, 158, 143, 0.13); color: var(--ok); }


.pill.wip { background: rgba(232, 167, 19, 0.16); color: #a1750a; }


.pill.new { background: rgba(24, 115, 185, 0.12); color: var(--sea); }


.photo-row { display: flex; gap: 5px; margin-top: 7px; }


.photo-row span { flex: 1; height: 40px; }


.ph-a { background: linear-gradient(135deg, #9fd8e8, #4a90b8); }


.ph-b { background: linear-gradient(135deg, #c8e8d8, #6ab890); }


.ph-c { background: linear-gradient(135deg, #f0e0c0, #c8a060); }


.ph-deck { background: linear-gradient(160deg, #e8eef4 0%, #b8ccd8 50%, #8aa8bc 100%); }



/* Onay paneli — düz UI kartı */
.ui-card {
  position: absolute;
  right: 0;
  top: 150px;
  width: 250px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 24px 24px 0 rgba(5, 48, 59, 0.08);
  z-index: 3;
  font-size: 11px;
}


.ui-card .uc-head { padding: 10px 14px; border-bottom: 1px solid #edeae0; display: flex; justify-content: space-between; align-items: center; }


.ui-card .uc-head b { font-family: var(--font-display); font-size: 12px; }


.ui-card .uc-head .mono { font-size: 8px; }


.ui-card .uc-photo { height: 110px; position: relative; }


.ui-card .stamp { position: absolute; left: 8px; bottom: 8px; background: rgba(5,48,59,0.8); color: #fff; font-family: var(--font-mono); font-size: 7px; padding: 3px 7px; }


.ui-card .uc-actions { display: flex; }


.ui-card .uc-actions span { flex: 1; text-align: center; font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 11px 0; }


.ui-card .ap-ok { background: var(--orange); color: #fff; }


.ui-card .ap-no { background: #f0ede4; color: #7b8698; }



/* ---------- AI sohbet telefonu ---------- */
.chat-ui { padding: 9px; display: flex; flex-direction: column; gap: 7px; height: calc(100% - 62px); }


.cmsg { max-width: 86%; font-size: 10px; line-height: 1.5; padding: 7px 10px; border-radius: 11px; }


.cmsg.user { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 3px; }


.cmsg.ai { align-self: flex-start; background: #fff; border: 1px solid #e3e6ec; border-bottom-left-radius: 3px; }


.cmsg.ai b { color: var(--sea); }


.cmsg .tick { color: var(--ok); font-weight: 700; }


.chat-hint { margin-top: auto; display: flex; gap: 5px; }


.chat-hint span { flex: 1; font-size: 8.5px; color: var(--mute); background: #fff; border: 1px dashed #cfd6de; border-radius: 9px; padding: 6px 8px; text-align: center; }



/* Öngörülü bakım kartı */
.pred-row { padding: 8px 12px; border-top: 1px solid #edeae0; }


.pred-row .pr-head { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 600; margin-bottom: 4px; }


.pred-row .pr-head .mono { font-size: 7.5px; color: var(--sea); }


.pred-row .bar { height: 4px; background: #e8ebef; }


.pred-row .bar i { display: block; height: 100%; background: var(--orange); }


.pred-row small { display: block; font-size: 8px; color: #7b8698; margin-top: 4px; }




/* ---------- Uygulama modülleri ---------- */
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }


.mod { border-top: 1px solid var(--line); padding: 26px 0; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }


.mod .mno { font-family: var(--font-mono); font-size: 10px; color: var(--orange); padding-top: 6px; }


.mod h3 { font-size: 19px; margin-bottom: 8px; }


.mod ul { list-style: none; }


.mod li { font-size: 13.5px; color: var(--mute); padding: 3px 0 3px 16px; position: relative; line-height: 1.55; }


.mod li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1.5px; background: var(--orange); }


.mod li b { color: var(--ink); font-weight: 600; }




/* ---------- Uygulama ekran mockuplari ---------- */
.shots { margin-top: 56px; }


.shots-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-top: 12px; }


.shots-cap b { color: var(--orange); font-weight: 700; }



/* Tarayıcı çerçevesi + kanban */
.browser { background: #fff; border: 1px solid var(--line); box-shadow: 24px 24px 0 rgba(5, 48, 59, 0.08); }


.br-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e8ebef; }


.br-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e8; }


.br-bar .url { flex: 1; max-width: 260px; margin-left: 10px; font-family: var(--font-mono); font-size: 9px; color: var(--mute); background: #f2f5f6; padding: 4px 12px; border-radius: 6px; }


.kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 16px; background: #f7f9fa; }


.kb-col { background: #eef1f4; border-radius: 8px; padding: 8px; min-height: 240px; }


.kb-col h5 { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 2px 4px 8px; display: flex; justify-content: space-between; }


.kb-card { background: #fff; border-radius: 6px; border: 1px solid #e3e7eb; border-left: 3px solid var(--orange); padding: 8px 9px; margin-bottom: 8px; font-size: 10px; }


.kb-card.drag { transform: rotate(-3deg); box-shadow: 0 10px 22px rgba(5,48,59,0.18); border-left-color: var(--sea); }


.kb-card .kt { font-weight: 600; margin-bottom: 3px; }


.kb-card .km { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: #7b8698; }


.kb-card .av { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 7px; font-weight: 700; display: grid; place-items: center; }


.kb-card .av.b { background: var(--sea); }


.kb-card .av.c { background: #5fd0d6; color: var(--ink); }


.kb-card .cam { color: var(--ok); }



/* Ekran satırı: 3 panel */
.shots-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; align-items: start; }



/* Checklist telefonu (statik, akışta) */
.phone-static { width: 100%; max-width: 270px; background: var(--ink); padding: 9px; box-shadow: 18px 18px 0 rgba(5,48,59,0.08); margin: 0 auto; }


.phone-static .screen { background: #f4f6fa; font-size: 11px; color: #1a2333; overflow: hidden; }


.cl-prog { padding: 10px 14px 0; }


.cl-prog .bar { height: 5px; background: #e3e7eb; }


.cl-prog .bar i { display: block; height: 100%; width: 60%; background: var(--orange); }


.cl-prog small { font-family: var(--font-mono); font-size: 7.5px; color: #7b8698; }


.cl-item { display: flex; gap: 9px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #eceff2; }


.cl-item .box { flex: none; width: 15px; height: 15px; border: 1.5px solid #c8cfd7; border-radius: 4px; }


.cl-item.done .box { background: var(--orange); border-color: var(--orange); position: relative; }


.cl-item.done .box::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }


.cl-item.done span { color: #9aa4b0; text-decoration: line-through; }


.cl-item .need { margin-left: auto; font-family: var(--font-mono); font-size: 7px; color: var(--sea); white-space: nowrap; }


.cl-btn { margin: 12px 14px 14px; background: var(--orange); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; padding: 10px; }



/* Tedarikçi misafir görünümü */
.guest { background: #fff; border: 1px solid var(--line); box-shadow: 18px 18px 0 rgba(5,48,59,0.08); font-size: 11px; }


.guest .g-head { padding: 10px 14px; border-bottom: 1px solid #eceff2; display: flex; justify-content: space-between; align-items: center; }


.guest .g-head b { font-family: var(--font-display); font-size: 12.5px; }


.guest .g-badge { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.08em; background: rgba(18,160,175,0.12); color: var(--sea); padding: 3px 8px; }


.guest .g-task { padding: 10px 14px; border-bottom: 1px solid #eceff2; }


.guest .g-task b { display: block; font-size: 11.5px; margin-bottom: 2px; }


.guest .g-task p { font-size: 9.5px; color: #7b8698; line-height: 1.5; }


.guest textarea-mock, .guest .g-note { margin: 10px 14px 0; border: 1px solid #e3e7eb; border-radius: 6px; padding: 8px 10px; font-size: 9.5px; color: #55606d; background: #fafbfc; }


.guest .g-photos { display: flex; gap: 7px; margin: 10px 14px; }


.guest .g-photos span { width: 52px; height: 44px; border-radius: 6px; }


.guest .g-photos .add { border: 1.5px dashed #c8cfd7; display: grid; place-items: center; color: var(--sea); font-size: 15px; background: #fff; }


.guest .g-btn { margin: 4px 14px 14px; background: var(--ink); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; padding: 10px; }




/* ---------- Mobil ekran bileşenleri ---------- */
.shots-row.single { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }



/* Mobil kanban */
.mkb { display: flex; gap: 8px; padding: 10px; overflow: hidden; }


.mkb-col { flex: 0 0 74%; background: #eef1f4; border-radius: 8px; padding: 8px; min-height: 200px; }


.mkb-col h5 { font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 2px 4px 7px; display: flex; justify-content: space-between; }


.mkb-swipe { text-align: center; font-family: var(--font-mono); font-size: 7.5px; color: #9aa4b0; padding: 4px 0 10px; letter-spacing: 0.1em; }



/* Tekne profili ekranı */
.p-cover { height: 92px; background-size: cover; background-position: center; position: relative; }


.p-cover .pc-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(5,48,59,0.85) 100%); }


.p-cover .pc-t { position: absolute; left: 12px; bottom: 8px; color: #fff; z-index: 1; }


.p-cover .pc-t b { font-family: var(--font-display); font-size: 13px; display: block; }


.p-cover .pc-t span { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }


.alert { margin: 9px 12px 0; display: flex; gap: 8px; align-items: flex-start; background: rgba(184, 64, 42, 0.08); border-left: 3px solid #b8402a; padding: 7px 9px; font-size: 9.5px; color: #8e3521; line-height: 1.45; }


.alert.warn { background: rgba(232, 167, 19, 0.12); border-left-color: #d99a10; color: #7d6207; }


.prow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #eceff2; font-size: 10px; }


.prow .v { font-family: var(--font-mono); font-size: 8.5px; color: var(--mute); text-align: right; }


.psec { font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea); padding: 10px 12px 4px; }


.crew-line { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #eceff2; font-size: 10px; }


.mini-av { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 8px; font-weight: 700; display: grid; place-items: center; }


.mini-av.b { background: var(--sea); }


.mini-av.c { background: #5fd0d6; color: var(--ink); }


.crew-line small { margin-left: auto; font-family: var(--font-mono); font-size: 7.5px; color: var(--mute); }



/* Logbook */
.lb-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 9px 12px; border-bottom: 1px solid #eceff2; font-size: 10px; }


.lb-item .ic { font-size: 13px; }


.lb-item b { display: block; font-size: 10.5px; }


.lb-item p { color: #7b8698; font-size: 9px; line-height: 1.45; }


.lb-item .dt { font-family: var(--font-mono); font-size: 7.5px; color: var(--mute); white-space: nowrap; }



/* Bakım planı timeline */
.tl { padding: 6px 0 10px; }


.tl-item { position: relative; padding: 0 12px 16px 36px; font-size: 10px; }


.tl-item::before { content: ""; position: absolute; left: 19px; top: 4px; bottom: -4px; width: 1.5px; background: #dde2e8; }


.tl-item:last-child::before { display: none; }


.tl-item::after { content: ""; position: absolute; left: 14px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid #c3ccd4; }


.tl-item.done::after { background: var(--ok); border-color: var(--ok); }


.tl-item.due::after { background: #e8a713; border-color: #e8a713; }


.tl-item.next::after { border-color: var(--orange); }


.tl-item b { display: block; font-size: 10.5px; }


.tl-item p { color: #7b8698; font-size: 9px; line-height: 1.45; }


.tl-item .dt { font-family: var(--font-mono); font-size: 7.5px; color: var(--sea); }



/* Fotoğraflı kanıt ekleme */
.pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; }


.pg span { height: 66px; border-radius: 6px; background-size: cover; background-position: center; position: relative; }


.pg span em { position: absolute; right: 4px; bottom: 4px; font-style: normal; font-family: var(--font-mono); font-size: 6.5px; background: rgba(5,48,59,0.8); color: #fff; padding: 2px 5px; border-radius: 4px; }


.pg .addt { border: 1.5px dashed #c8cfd7; background: #fff; display: grid; place-items: center; color: var(--sea); font-size: 18px; }




/* Rehber ekranı */
.shots-row.double { grid-template-columns: 1fr 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }


.dir-search { margin: 10px 12px; background: #fff; border: 1px solid #e3e7eb; border-radius: 8px; padding: 8px 12px; font-size: 9.5px; color: #9aa4b0; display: flex; align-items: center; gap: 7px; }


.dir-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #eceff2; }


.dir-item b { display: block; font-size: 10.5px; }


.dir-item .loc { font-family: var(--font-mono); font-size: 7px; color: var(--mute); }


.tagz { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }


.tagz span { font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 0.04em; background: rgba(18,160,175,0.1); color: var(--sea); padding: 2px 6px; border-radius: 4px; }


.dir-call { width: 26px; height: 26px; border-radius: 50%; background: rgba(18,160,175,0.12); color: var(--sea); display: grid; place-items: center; font-size: 11px; }


.dir-item .stars { font-size: 7.5px; color: #e8a713; }

/* Açık tema düzeltmeleri */
.phone-static { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12); border-radius: 22px; }
.phone-static .screen { border-radius: 14px; }
.browser, .panel, .guest { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1); border-radius: 12px; overflow: hidden; }
.shots-cap b { color: var(--orange); }
.mod h3 { color: var(--ink); }
.alert { border-radius: 0 6px 6px 0; }
.shots-row { margin-top: 44px; }
.shots-row.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1020px) {
  .mod-grid { grid-template-columns: 1fr; }
  .shots-row, .shots-row.triple { grid-template-columns: 1fr; gap: 36px; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Ürün sayfası CTA */
.cta-lite { background: linear-gradient(140deg, #1D4ED8, #2563EB); border-radius: 16px; padding: 52px; text-align: center; color: #fff; }
.cta-lite h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.cta-lite p { color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 26px; }
.cta-lite .btn { background: #fff; color: #1D4ED8; }
.cta-lite .btn:hover { background: #EFF6FF; }