/* ============================================================
deck.css — მინიმალისტური სასლაიდე ძრავი (dependency-free)
ლიცენზია: MIT. ყველა ფერი/ზომა ერთ ადგილას — :root-ში.
============================================================ */
:root{
/* --- ფერები (ღია თემა) --- */
--bg: #fdfdfc;
--panel: #f4f4f1;
--ink: #1b1b19;
--muted: #6b6b64;
--line: #e0e0da;
--accent: #2b6cb0; /* ლურჯი — სათაურები, აქცენტი */
--accent2: #2f855a; /* მწვანე — „კარგი“, პასუხები */
--warn: #b7791f; /* ქარვისფერი — გაფრთხილება */
--danger: #c53030; /* წითელი — შეცდომა */
/* --- კოდის ტოკენები --- */
--c-com: #7a7a70;
--c-str: #b7410e;
--c-num: #6b46c1;
--c-kw: #2b6cb0;
--c-bi: #2f855a;
--c-fn: #975a16;
/* --- განლაგება --- */
--maxw: 1180px;
--pad: clamp(24px, 4.2vw, 68px);
--radius: 10px;
--font: "Noto Sans Georgian", "Sylfaen", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--mono: "Cascadia Mono", "Consolas", "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
color-scheme: light;
}
[data-theme="dark"]{
--bg: #14161a;
--panel: #1c1f25;
--ink: #e7e9ec;
--muted: #9aa1ac;
--line: #2b3038;
--accent: #63a4ff;
--accent2: #68d391;
--warn: #ecc94b;
--danger: #fc8181;
--c-com: #7d848f;
--c-str: #f0a06a;
--c-num: #b794f4;
--c-kw: #63a4ff;
--c-bi: #68d391;
--c-fn: #f6c177;
color-scheme: dark;
}
/* ---------- ორენოვნება ----------
ტექსტი იწერება ორჯერ: ……
ჩანს მხოლოდ ის, რომელიც -ს ემთხვევა. სუფთა CSS — JS არ სჭირდება. */
html[lang="ka"] [lang="en"]{display:none !important}
html[lang="en"] [lang="ka"]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:var(--bg); color:var(--ink);
font-family:var(--font); font-size:16px; line-height:1.5;
overflow:hidden; -webkit-font-smoothing:antialiased;
}
/* ---------- სლაიდები ---------- */
.deck{position:relative;height:100vh;width:100vw}
.slide{
position:absolute; inset:0; display:none;
flex-direction:column; justify-content:center;
padding:var(--pad) var(--pad) calc(var(--pad) * .8);
max-width:var(--maxw); margin:0 auto; overflow-y:auto;
}
.slide.active{display:flex; animation:in .28s ease}
/* შიგთავსი არ უნდა ჩაიჭყლიტოს — მაღალი სლაიდი უბრალოდ დასქროლვადი გახდეს */
.slide > *{flex-shrink:0}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- ტიპოგრაფია ---------- */
h1{font-size:clamp(30px,5vw,60px); line-height:1.06; font-weight:800; letter-spacing:-.5px}
h2{font-size:clamp(23px,3.4vw,40px); line-height:1.15; font-weight:800; margin-bottom:.55em}
h3{font-size:clamp(17px,2vw,23px); font-weight:700; margin-bottom:.35em}
.kicker{
font-size:clamp(11px,1.3vw,13px); letter-spacing:2.5px; text-transform:uppercase;
color:var(--accent); font-weight:700; margin-bottom:14px;
}
.kicker.g{color:var(--accent2)}
.lead{font-size:clamp(17px,2.1vw,25px); line-height:1.45; color:var(--muted)}
p{font-size:clamp(15px,1.75vw,20px); line-height:1.55}
p + p{margin-top:.7em}
.muted{color:var(--muted)}
.big{font-size:clamp(18px,2.4vw,28px); line-height:1.4}
.small{font-size:clamp(13px,1.4vw,16px)}
b,strong{font-weight:700}
em{color:var(--accent); font-style:normal; font-weight:700}
a{color:var(--accent)}
/* ---------- სიები ---------- */
ul.pts,ol.pts{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:6px}
ul.pts li,ol.pts li{
font-size:clamp(15px,1.85vw,21px); line-height:1.4;
padding-left:28px; position:relative;
}
ul.pts li::before{
content:""; position:absolute; left:2px; top:.55em;
width:9px; height:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg);
}
ol.pts{counter-reset:s}
ol.pts li::before{
counter-increment:s; content:counter(s); position:absolute; left:0; top:.05em;
width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff;
font-size:12px; font-weight:700; display:grid; place-items:center;
}
ul.pts li small,ol.pts li small{display:block; color:var(--muted); font-size:.74em; margin-top:2px; line-height:1.35}
ul.pts.tight li{font-size:clamp(14px,1.55vw,18px)}
/* ---------- ბადე / ბარათები ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:18px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:16px 18px;
}
.card h3{color:var(--accent); font-size:clamp(15px,1.7vw,19px)}
.card p,.card li{font-size:clamp(13px,1.45vw,16px); line-height:1.45}
.card ul{list-style:none; display:flex; flex-direction:column; gap:5px; margin-top:6px}
.card ul li{padding-left:14px; position:relative; color:var(--muted)}
.card ul li::before{content:"·"; position:absolute; left:3px; color:var(--accent)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; margin-top:14px}
@media (max-width:820px){ .two{grid-template-columns:1fr} }
/* ---------- კოდი ---------- */
pre.code{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:14px 16px; margin-top:12px; overflow-x:auto; position:relative;
font-family:var(--mono); font-size:clamp(12.5px,1.35vw,17px); line-height:1.55;
tab-size:4;
}
pre.code code{font-family:inherit; white-space:pre}
pre.code[data-title]::before{
content:attr(data-title); position:absolute; top:0; right:0;
background:var(--line); color:var(--muted);
font-family:var(--font); font-size:11px; letter-spacing:.5px;
padding:2px 9px; border-radius:0 var(--radius) 0 var(--radius);
}
pre.code .cp{
position:absolute; top:6px; right:6px; opacity:0; transition:opacity .15s;
background:var(--bg); color:var(--muted); border:1px solid var(--line); border-radius:5px;
font-family:var(--font); font-size:11px; padding:3px 8px; cursor:pointer;
}
pre.code:hover .cp{opacity:1}
pre.code[data-title]:hover .cp{top:26px}
code.inl{
font-family:var(--mono); font-size:.88em; background:var(--panel);
border:1px solid var(--line); border-radius:5px; padding:1px 6px;
}
.out{color:var(--muted); border-left:3px solid var(--line); padding-left:12px; margin-top:8px;
font-family:var(--mono); font-size:clamp(12px,1.3vw,16px); white-space:pre-wrap}
.t-com{color:var(--c-com); font-style:italic}
.t-str{color:var(--c-str)}
.t-num{color:var(--c-num)}
.t-kw {color:var(--c-kw); font-weight:600}
.t-bi {color:var(--c-bi)}
.t-fn {color:var(--c-fn)}
/* ---------- callout ---------- */
.callout{
border-left:4px solid var(--accent); background:var(--panel);
border-radius:0 var(--radius) var(--radius) 0; padding:12px 16px; margin-top:14px;
font-size:clamp(14px,1.55vw,18px);
}
.callout.tip{border-color:var(--accent2)}
.callout.warn{border-color:var(--warn)}
.callout.err{border-color:var(--danger)}
/* მხოლოდ სათაური იქცევა ბლოკად, არა ყველა .
მეორე სელექტორი ორენოვან ჩანაწერს ეხება: .callout > [lang] > b */
.callout > b:first-child,
.callout > [lang] > b:first-child{display:block; margin-bottom:3px}
/* ---------- ცხრილი ---------- */
table{border-collapse:collapse; width:100%; margin-top:14px; font-size:clamp(13px,1.45vw,17px)}
th,td{border:1px solid var(--line); padding:7px 11px; text-align:left; vertical-align:top}
th{background:var(--panel); font-weight:700}
td code,th code{font-family:var(--mono); font-size:.9em}
/* ---------- კითხვები (ქვიზი) ---------- */
.quiz{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.quiz details{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:10px 14px;
}
.quiz summary{
cursor:pointer; font-size:clamp(14px,1.6vw,19px); font-weight:600; line-height:1.45;
list-style:none; position:relative; padding-left:30px;
}
.quiz summary::-webkit-details-marker{display:none}
.quiz summary::before{
content:"?"; position:absolute; left:0; top:.2em;
width:20px; height:20px; border-radius:50%;
background:var(--accent); color:#fff; font-size:12px; font-weight:700;
display:grid; place-items:center;
}
.quiz details[open] summary::before{content:"✓"; background:var(--accent2)}
.quiz .ans{
margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);
color:var(--accent2); font-size:clamp(13px,1.45vw,17px); line-height:1.5;
}
.quiz .ans code{font-family:var(--mono); background:var(--bg); padding:1px 5px; border-radius:4px}
/* ---------- ბეიჯები / კლავიშები ---------- */
.tag{
display:inline-block; background:var(--panel); border:1px solid var(--line);
border-radius:20px; padding:2px 11px; font-size:13px; color:var(--muted); margin:3px 4px 0 0;
}
kbd{
font-family:var(--mono); font-size:.85em; background:var(--panel);
border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px;
}
/* ---------- ლექტორის ჩანაწერი ---------- */
.note{
display:none; margin-top:16px; padding:11px 15px;
background:color-mix(in srgb, var(--warn) 12%, transparent);
border-left:4px solid var(--warn); border-radius:0 var(--radius) var(--radius) 0;
font-size:clamp(13px,1.4vw,16px); color:var(--ink); line-height:1.5;
}
body.notes .note{display:block}
.note::before{content:"🎤 "; opacity:.7}
/* ---------- ინტერფეისი ---------- */
#bar{position:fixed; top:0; left:0; height:3px; background:var(--accent); width:0; z-index:60; transition:width .3s}
#hud{
position:fixed; bottom:14px; right:18px; z-index:50; display:flex; gap:10px; align-items:center;
font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;
}
#hud button{
background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px;
font-family:var(--font); font-size:12px; padding:2px 8px; cursor:pointer;
}
#hud button:hover{color:var(--accent); border-color:var(--accent)}
#hint{position:fixed; bottom:14px; left:18px; z-index:50; font-size:11.5px; color:var(--muted); opacity:.75}
#hint b{color:var(--accent)}
@media (max-width:700px){ #hint{display:none} }
#outline{
position:fixed; inset:0; z-index:70; background:var(--bg); padding:calc(var(--pad) * .7);
overflow-y:auto; display:none;
}
#outline.on{display:block}
#outline h2{margin-bottom:.4em}
#outline ol{list-style:none; counter-reset:o; columns:2; column-gap:34px}
@media (max-width:760px){ #outline ol{columns:1} }
#outline li{
counter-increment:o; break-inside:avoid; padding:6px 6px 6px 40px; position:relative;
cursor:pointer; border-radius:6px; font-size:15px; line-height:1.35;
}
#outline li::before{
content:counter(o); position:absolute; left:8px; top:6px; color:var(--muted);
font-size:12px; font-variant-numeric:tabular-nums;
}
#outline li:hover{background:var(--panel); color:var(--accent)}
#outline li.cur{background:var(--panel); font-weight:700; color:var(--accent)}
/* ---------- ლექტორის ხედი (მეორე ფანჯარა) ----------
იმავე ფაილს ვხსნით hash-ით "#5p"; deck.js ამატებს body.pmode-ს.
სლაიდი მინიატურაში ნამდვილი ასლია — transform: scale()-ით შემცირებული. */
body.pmode main.deck{display:none}
body.pmode #hint{display:none}
#pv{position:fixed; inset:0; z-index:40; background:var(--bg);
display:grid; grid-template-rows:auto 1fr}
#pv-top{display:flex; align-items:center; gap:12px;
padding:9px 16px; border-bottom:1px solid var(--line)}
#pv-timer{font-size:31px; font-weight:800; letter-spacing:-1px; line-height:1;
font-variant-numeric:tabular-nums; color:var(--accent)}
#pv-clock{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:6px}
#pv-top button{background:none; border:1px solid var(--line); color:var(--muted);
border-radius:6px; font-family:var(--font); font-size:12px; padding:3px 9px; cursor:pointer}
#pv-top button:hover{color:var(--accent); border-color:var(--accent)}
#pv-title{margin-left:auto; font-size:11px; letter-spacing:2.2px;
text-transform:uppercase; color:var(--muted); font-weight:700}
#pv-body{display:grid; grid-template-columns:1.35fr 1fr; gap:16px;
padding:12px 16px 54px; min-height:0}
#pv-left,#pv-right{display:grid; gap:5px; min-height:0}
#pv-left{grid-template-rows:auto 1fr}
#pv-right{grid-template-rows:auto 1fr auto minmax(140px,1.3fr)}
.plab{font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase;
color:var(--muted); font-weight:700}
.pstage{position:relative; overflow:hidden; min-height:0;
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
.pframe{position:absolute; top:0; left:0; transform-origin:top left; background:var(--bg)}
.pstage .slide{animation:none}
.pend{position:absolute; inset:0; display:grid; place-items:center;
color:var(--muted); font-size:15px}
#pv-notes{overflow-y:auto; min-height:0; padding:12px 15px;
background:color-mix(in srgb, var(--warn) 11%, transparent);
border-left:4px solid var(--warn); border-radius:0 var(--radius) var(--radius) 0}
#pv-notes .pnote{font-size:17px; line-height:1.55; color:var(--ink)}
#pv-notes .pnote + .pnote{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
#pv-notes .pnone{font-size:14px; color:var(--muted); font-style:italic}
/* ვიწრო ფანჯარაზე — ერთ სვეტად */
@media (max-width:900px){
#pv-body{grid-template-columns:1fr; grid-template-rows:1.2fr auto}
}
/* ---------- ბეჭდვა / PDF ---------- */
@media print{
:root{--pad:14mm}
body{overflow:visible; background:#fff; color:#000; font-size:11pt}
#bar,#hud,#hint,#outline,#pv,.cp{display:none !important}
body.pmode main.deck{display:block !important} /* ლექტორის ფანჯრიდანაც იბეჭდება */
.deck{height:auto}
.slide{
position:relative; display:flex !important; inset:auto; height:auto; min-height:0;
page-break-after:always; break-after:page; padding:0 0 10mm; max-width:100%;
border-bottom:1px solid #ddd; margin-bottom:10mm; animation:none;
}
.slide:last-child{page-break-after:auto}
.note{display:block !important}
.quiz details{border:1px solid #ccc}
pre.code{background:#f6f6f4; border:1px solid #ddd}
h1{font-size:24pt} h2{font-size:17pt} p,li{font-size:11pt}
}