/* ==========================================================================
   Randevu Sistemi tanıtım sayfası (urunler/randevu-sistemi.php)
   Ortak taban: css/gorev-tanitim.css (.gv* — tanıtım sayfası tasarım sistemi).
   Bu dosya yalnız randevuya özgü bileşenleri ekler (rt- öneki).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Canlı demo: gün takvimi (personel sütunları) + WhatsApp telefonu
   -------------------------------------------------------------------------- */
.rt-demo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 600px; }
.rt-cal { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.rt-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rt-cal-top h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.rt-cal-top h3 small { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.rt-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.rt-pill i { font-size: 11px; }
.rt-pill.is-ai { background: var(--b-lav-bg); border-color: transparent; color: var(--b-lav-t); }
.rt-pill.is-talep { border-style: dashed; }
.rt-pill[hidden] { display: none; }

.rt-quick { padding: 12px 18px 6px; }
.rt-quick .gv-nl-box { padding-left: 8px; }
.rt-quick .gv-key { height: 24px; min-width: 24px; }

.rt-grid-wrap { flex: 1; overflow-x: auto; padding: 6px 18px 18px; }
.rt-grid { --saat: 58px; --bas: 9; display: grid; grid-template-columns: 52px repeat(3, minmax(120px, 1fr)); min-width: 460px; position: relative; }
.rt-col-h { height: 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding-left: 8px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; z-index: 3; }
.rt-col-h .gv-av { width: 24px; height: 24px; font-size: 10px; }
.rt-col-h small { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.rt-axis { position: relative; }
.rt-axis span { position: absolute; right: 8px; transform: translateY(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rt-lane { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% var(--saat); cursor: copy; }
.rt-lane:hover { background-color: rgba(20,20,20,.012); }
.rt-mola { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(20,20,20,.05) 0 5px, transparent 5px 10px); font-size: 10.5px; color: var(--ink-3); padding: 3px 6px; pointer-events: none; }
.rt-now { position: absolute; left: 52px; right: 0; height: 0; border-top: 1.5px solid var(--coral); z-index: 4; pointer-events: none; }
.rt-now::before { content: ''; position: absolute; left: -4px; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

.rt-blk {
    position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px 5px 10px; overflow: hidden;
    font-size: 12px; line-height: 1.3; background: var(--bg, var(--b-blue-bg)); color: var(--tx, var(--b-blue-t));
    box-shadow: inset 3px 0 0 var(--rl, var(--b-blue-r)); transition: top .45s cubic-bezier(.2,.9,.3,1.1), background .3s, opacity .3s;
}
.rt-blk b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-blk span { display: block; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-blk .rt-st { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.6); border-radius: 4px; padding: 1px 5px; }
.rt-blk.s-onay { --bg: var(--b-mint-bg); --tx: var(--b-mint-t); --rl: var(--b-mint-r); }
.rt-blk.s-bekle { --bg: var(--b-blue-bg); --tx: var(--b-blue-t); --rl: var(--b-blue-r); }
.rt-blk.s-seans { --bg: var(--b-lav-bg); --tx: var(--b-lav-t); --rl: var(--b-lav-r); }
.rt-blk.s-geldi { --bg: #efefee; --tx: rgba(20,20,20,.55); --rl: rgba(20,20,20,.25); }
.rt-blk.s-iptal { --bg: #f6f6f5; --tx: rgba(20,20,20,.4); --rl: rgba(20,20,20,.15); }
.rt-blk.s-iptal b { text-decoration: line-through; }
.rt-blk.s-talep { background: rgba(255,255,255,.85); box-shadow: none; border: 1.5px dashed rgba(20,20,20,.35); color: var(--ink); }
.rt-blk.s-talep .rt-tb { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rt-blk.s-talep .rt-tb button { border: 0; border-radius: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 7px; cursor: pointer; background: var(--ink); color: #fff; }
.rt-blk.s-talep .rt-tb button + button { background: #efefee; color: var(--ink); }
.rt-blk.is-vurgu { animation: rtVurgu 1.2s ease; }
.rt-blk.is-new { animation: gvPop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes rtVurgu { 0%, 100% { box-shadow: inset 3px 0 0 var(--rl, var(--b-blue-r)); } 30% { box-shadow: inset 3px 0 0 var(--rl), 0 0 0 3px rgba(232,96,76,.45); } }

/* Telefon */
.rt-phone-wrap { display: flex; flex-direction: column; background: #f3efe9; min-width: 0; }
.rt-phone-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.rt-phone-top .gv-av { width: 34px; height: 34px; background: var(--ink); color: #fff; }
.rt-phone-top b { font-size: 14px; font-weight: 600; display: block; }
.rt-phone-top small { font-size: 11.5px; color: var(--ink-3); }
.rt-phone-top .rt-reset { margin-left: auto; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; height: 28px; padding: 0 10px; font-size: 11.5px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.rt-chat { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 560px; }
.rt-day { align-self: center; font-size: 11px; background: rgba(255,255,255,.8); color: var(--ink-2); border-radius: 6px; padding: 3px 8px; }
.rt-b { max-width: 88%; padding: 8px 10px 6px; border-radius: 10px; font-size: 13px; line-height: 1.45; position: relative; box-shadow: 0 1px 1px rgba(20,20,20,.06); animation: gvIn .35s ease both; }
.rt-b.out { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.rt-b.in { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 3px; }
.rt-b small { display: block; text-align: right; font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.rt-b small i { color: #53bdeb; margin-left: 3px; }
.rt-b .rt-biz { font-size: 11px; color: var(--ink-3); display: block; margin-top: 4px; }
.rt-qr { display: grid; gap: 6px; align-self: flex-start; width: 88%; animation: gvIn .35s ease both; }
.rt-qr button { border: 0; background: #fff; border-radius: 9px; height: 36px; font-size: 13px; font-weight: 500; color: #0a7cff; cursor: pointer; box-shadow: 0 1px 1px rgba(20,20,20,.06); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s; }
.rt-qr button:hover:not(:disabled) { background: #f4f9ff; }
.rt-qr button:disabled { color: var(--ink-3); cursor: default; }
.rt-qr button.is-picked { background: #e9f3ff; }
.rt-qr.is-list { grid-template-columns: 1fr 1fr; }
.rt-qr.is-list button { font-family: var(--mono); font-size: 12px; }
.rt-qr.is-list button.wide { grid-column: 1 / -1; font-family: var(--sans); }
.rt-typing { align-self: flex-end; background: #dcf8c6; border-radius: 10px; padding: 8px 12px; display: flex; gap: 4px; }
.rt-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,20,20,.35); animation: rtNokta 1s infinite; }
.rt-typing i:nth-child(2) { animation-delay: .15s; } .rt-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rtNokta { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.rt-phone-foot { padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); background: #fff; border-top: 1px solid var(--line); line-height: 1.4; }

/* Demo içi AI öneri kartı */
.rt-oneri { margin: 0 18px 14px; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; background: #fff; animation: gvIn .4s ease both; flex-wrap: wrap; }
.rt-oneri[hidden] { display: none; }
.rt-oneri .etk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--b-lav-t); background: var(--b-lav-bg); border-radius: 5px; padding: 2px 6px; }
.rt-oneri p { flex: 1; min-width: 180px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rt-oneri p b { color: var(--ink); font-weight: 600; }
.rt-oneri .gv-btn { height: 34px; font-size: 13px; padding: 0 14px; }

/* --------------------------------------------------------------------------
   Akordeon sahneleri
   -------------------------------------------------------------------------- */
.rt-s-phone { max-width: 330px; margin: 0 auto; background: #f3efe9; border-radius: 22px; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 18px 40px -16px rgba(20,20,20,.25); }
.rt-s-phone .rt-b, .rt-s-phone .rt-qr { animation: none; }
.gv-scene.is-play .rt-s-phone .gv-anim-in { animation: gvIn .45s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: var(--d, 0s); }
.rt-s-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.rt-s-row:first-child { border-top: 0; }
.rt-s-row .t { font-family: var(--mono); font-size: 11px; color: var(--ink-3); width: 44px; }
.rt-s-row .r { margin-left: auto; font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
.rt-tk-read { color: #1d8fd1; } .rt-tk-del { color: var(--ink-2); } .rt-tk-fail { color: #b4331f; }
.rt-s-tpl { padding: 14px; font-size: 13px; line-height: 1.55; }
.rt-s-tpl .var { background: var(--b-lav-bg); color: var(--b-lav-t); border-radius: 4px; padding: 0 4px; font-family: var(--mono); font-size: 12px; }
.rt-s-tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.rt-ok { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; color: var(--b-mint-t); background: var(--b-mint-bg); border-radius: 6px; padding: 3px 8px; }
.rt-mini-cal { padding: 12px; }
.rt-mini-cal .rt-grid { min-width: 0; --saat: 34px; grid-template-columns: 40px repeat(2, 1fr); }
.rt-mini-cal .rt-col-h { height: 30px; font-size: 12px; position: static; }
.rt-mini-cal .rt-blk { font-size: 11px; padding: 3px 6px 3px 8px; }
.rt-cmdk { padding: 0; overflow: hidden; }
.rt-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rt-cmdk-g { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 4px; }
.rt-cmdk-i { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; }
.rt-cmdk-i.is-on { background: var(--soft); }
.rt-cmdk-i i { width: 16px; color: var(--ink-3); font-size: 12px; text-align: center; }
.rt-cmdk-i kbd { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.rt-mob { max-width: 260px; margin: 0 auto; border-radius: 26px; border: 1px solid var(--line-2); background: #fff; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(20,20,20,.25); }
.rt-mob-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 8px; font-weight: 600; font-size: 14px; }
.rt-mob-seg { display: flex; gap: 4px; padding: 0 12px 10px; }
.rt-mob-seg span { flex: 1; text-align: center; font-size: 11px; padding: 4px 0; border-radius: 6px; background: var(--soft); color: var(--ink-2); }
.rt-mob-seg span.is-on { background: var(--ink); color: #fff; }
.rt-mob-g { font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 8px 14px 4px; }
.rt-mob-i { display: flex; gap: 10px; padding: 7px 14px; font-size: 12px; align-items: center; }
.rt-mob-i .t { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); width: 36px; }
.rt-mob-i .c { flex: 1; border-radius: 7px; padding: 6px 8px; background: var(--b-blue-bg); color: var(--b-blue-t); box-shadow: inset 3px 0 0 var(--b-blue-r); }
.rt-mob-i .c.m { background: var(--b-mint-bg); color: var(--b-mint-t); box-shadow: inset 3px 0 0 var(--b-mint-r); }
.rt-mob-i .c.bos { background: transparent; box-shadow: none; border: 1px dashed var(--line-2); color: var(--ink-3); }
.rt-mob-fab { display: flex; justify-content: flex-end; padding: 6px 12px 12px; }
.rt-mob-fab span { width: 36px; height: 36px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   Mesajdan randevuya (lavanta kutu) + seans paketi
   -------------------------------------------------------------------------- */
.rt-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); border-top: 1px solid var(--line); }
.rt-split.is-rev { grid-template-columns: minmax(0, 1fr) 380px; }
.rt-split.is-rev .rt-split-t { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.rt-split-t { padding: 48px 40px; border-right: 1px solid var(--line); }
.rt-split-t .gv-h2 { font-size: clamp(28px, 3.4vw, 38px); }
.rt-split-v { padding: 44px 36px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.rt-split-v.bg-lav { background: var(--lav); } .rt-split-v.bg-cream { background: var(--cream); } .rt-split-v.bg-mint { background: var(--mint); }
.rt-inbox { width: 100%; max-width: 520px; overflow: hidden; }
.rt-inbox-row { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: flex-start; }
.rt-inbox-row:first-child { border-top: 0; }
.rt-inbox-row .gv-av { width: 32px; height: 32px; }
.rt-inbox-b { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.rt-inbox-b header { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); margin-bottom: 3px; flex-wrap: wrap; }
.rt-inbox-b header b { color: var(--ink); font-weight: 600; font-size: 13px; }
.rt-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; }
.rt-tag.t-rdv { background: var(--b-lav-bg); color: var(--b-lav-t); }
.rt-tag.t-ert { background: var(--b-sand-bg); color: var(--b-sand-t); }
.rt-tag.t-risk { background: #fde2dd; color: #9f2d1c; }
.rt-tag.t-kontrol { background: var(--b-mint-bg); color: var(--b-mint-t); }
.rt-inbox-b q { quotes: '“' '”'; color: var(--ink); }
.rt-inbox-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rt-inbox-act span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); }
.rt-inbox-act span.pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.rt-inbox-act span .m { font-family: var(--mono); font-size: 11px; opacity: .75; }
.rt-note { font-size: 12.5px; color: var(--ink-3); margin-top: 18px; line-height: 1.5; }

.rt-seans { width: 100%; max-width: 400px; overflow: hidden; }
.rt-seans-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.rt-seans-h b { display: block; font-size: 15px; font-weight: 600; }
.rt-seans-h small { font-size: 12px; color: var(--ink-3); }
.rt-seans-h .rt-badge { font-family: var(--mono); font-size: 11px; background: var(--ink); color: #fff; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.rt-seans-r { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; border-top: 1px solid var(--line); }
.rt-seans-r:first-of-type { border-top: 0; }
.rt-seans-r i { width: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
.rt-seans-r.ok { color: var(--ink-3); } .rt-seans-r.ok i { color: var(--b-mint-r); }
.rt-seans-r.now { background: var(--b-lav-bg); color: var(--b-lav-t); font-weight: 600; } .rt-seans-r.now i { color: var(--b-lav-t); }
.rt-seans-r em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11.5px; }
.rt-seans-f { display: flex; gap: 8px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--b-mint-t); background: #f6fbf7; }

/* --------------------------------------------------------------------------
   Sektörel çözümler (iç bağlantı ızgarası)
   -------------------------------------------------------------------------- */
.rt-sektor { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.rt-sektor a { display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-decoration: none; transition: background .15s; }
.rt-sektor a:nth-child(3n) { border-right: 0; }
.rt-sektor a:hover { background: #fafaf9; }
.rt-sektor a:hover b::after { transform: translateX(3px); }
.rt-sektor i { width: 34px; height: 34px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; transform: rotate(-3deg); }
.rt-sektor b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.rt-sektor b::after { content: ' →'; display: inline-block; transition: transform .15s; color: var(--ink-3); font-weight: 400; }
.rt-sektor span { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.rt-ilgili { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 26px 24px 30px; }
.rt-ilgili a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 500; text-decoration: none; }
.rt-ilgili a:hover { background: #e9e9e7; }
.rt-ilgili a i { font-size: 12px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Duyarlı
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .rt-demo { grid-template-columns: minmax(0, 1fr) 300px; }
    .rt-split, .rt-split.is-rev { grid-template-columns: 320px minmax(0, 1fr); }
    .rt-split.is-rev { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 900px) {
    .rt-demo { grid-template-columns: 1fr; }
    .rt-cal { border-right: 0; border-top: 1px solid var(--line); }
    .rt-phone-wrap { order: -1; }
    .rt-chat { max-height: 460px; }
    .rt-split, .rt-split.is-rev { grid-template-columns: 1fr; }
    .rt-split.is-rev .rt-split-t { order: 0; border-left: 0; }
    .rt-split-t { border-right: 0; border-bottom: 1px solid var(--line); }
    .rt-sektor { grid-template-columns: 1fr 1fr; }
    .rt-sektor a:nth-child(3n) { border-right: 1px solid var(--line); }
    .rt-sektor a:nth-child(2n) { border-right: 0; }
}
@media (max-width: 760px) {
    .rt-cal-top { padding: 12px; }
    .rt-quick { padding: 10px 12px 4px; }
    .rt-grid-wrap { padding: 4px 12px 14px; }
    .rt-grid { --saat: 52px; grid-template-columns: 42px repeat(3, minmax(88px, 1fr)); min-width: 0; }
    .rt-col-h { font-size: 12px; padding-left: 4px; gap: 5px; }
    .rt-col-h small { display: none; }
    .rt-axis span { right: 5px; font-size: 10px; }
    .rt-now { left: 42px; }
    .rt-blk { left: 2px; right: 2px; padding: 4px 5px 4px 8px; font-size: 11.5px; }
    .rt-chat { max-height: 380px; }
    .rt-split-t { padding: 40px 16px; }
    .rt-split-v { padding: 28px 12px; }
    .rt-sektor { grid-template-columns: 1fr; }
    .rt-sektor a { border-right: 0 !important; padding: 18px 16px; }
    .rt-oneri { margin: 0 12px 12px; }
}