/* Hekto · Konsept 3 · Sohbet — "Flaş" renk secenegi (?renk=flas)
   Uygulamanin Flas temasi: dovme flash kagidi. Krem kagit, kirmizi murekkep,
   kalin siyah kontur, kaymis sert golge; sahne koyu.
   Her kural html[data-renk="flas"] altinda: parametre yoksa hicbiri devreye girmez.
   Yalniz renk, golge, filtre ve gorsel kaynagi degisir; olcu, bosluk, duzen, hareket ayni. */

html[data-renk="flas"] {
  /* uygulamadaki Flas degerleri */
  --red: #c9201c;
  --red-press: #a51713;
  --red-wash: rgba(201, 32, 28, .1);
  --on-red: #fff8ec;
  --cream-hi: #fffaf0;
  --dark: #131211;
  --dark-2: #1d1b19;
  --dark-3: #2b2825;
  --on-dark: #f0eadb;
  --on-dark-mute: #a9a293;

  /* mevcut roller -> Flas ailesi */
  --ink: #17130f;
  --ink-2: #3d352c;
  --mute: #5f5445;
  --paper: #ede5d0;          /* sayfa zemini: krem kagit */
  --paper-2: #fffaf0;        /* acik krem paneller */
  --paper-3: #ddd4bd;        /* koyu krem: secici zemini */
  --line: #cdc2a8;
  --purple: #c9201c;         /* ana vurgu: kirmizi */
  --purple-press: #a51713;
  --purple-soft: rgba(201, 32, 28, .1);
  --yellow: #c9201c;         /* fosforlu serit, ana dugme, dev dugme: kirmizi */
  --yellow-press: #a51713;
  --lilac: #e2aa9a;          /* ikinci serit: acik kirmizi yikama */
  --warm: #a51713;

  /* flash dili */
  --sh: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink);
  --sh-press: inset 0 0 0 2px var(--ink), 0 0 0 var(--ink);
  --st-filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)) drop-shadow(4px 4px 0 var(--ink));
  --card-filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(5px 5px 0 var(--ink));
}

html[data-renk="flas"] body { scrollbar-color: var(--ink) var(--paper-3); }
html[data-renk="flas"] ::selection { background: var(--red); color: var(--on-red); }
html[data-renk="flas"] :focus-visible { outline-color: var(--red); }
html[data-renk="flas"] .skip { color: var(--on-dark); }

/* ---------- Cikartma gorselleri: Flas renkli surumler ---------- */
html[data-renk="flas"] img[src$="img/st-mandala.png"] { content: url(img/st-mandala-flas.png); }
html[data-renk="flas"] img[src$="img/st-ay.png"] { content: url(img/st-ay-flas.png); }
html[data-renk="flas"] img[src$="img/st-yazi.png"] { content: url(img/st-yazi-flas.png); }
html[data-renk="flas"] img[src$="img/st-kol.png"] { content: url(img/st-kol-flas.png); }
html[data-renk="flas"] img[src$="img/st-gogus.png"] { content: url(img/st-gogus-flas.png); }

/* kalin kontur + kaymis sert golge */
html[data-renk="flas"] .st-in,
html[data-renk="flas"] .stage-mand,
html[data-renk="flas"] .body-st,
html[data-renk="flas"] .thumb--fan img { filter: var(--st-filter); }
html[data-renk="flas"] .chipfit--flat { filter: none; }

/* ---------- Dugmeler ---------- */
html[data-renk="flas"] .btn { transition: transform .12s var(--ease-out), background-color .2s, box-shadow .12s; }
html[data-renk="flas"] .btn--y { color: var(--on-red); box-shadow: var(--sh); }
html[data-renk="flas"] .btn--ink { color: var(--on-dark); box-shadow: 2px 2px 0 var(--red); }
html[data-renk="flas"] .btn--ghost { box-shadow: var(--sh); }
html[data-renk="flas"] .btn--y:active,
html[data-renk="flas"] .btn--ghost:active { transform: translate(2px, 2px); box-shadow: var(--sh-press); }
html[data-renk="flas"] .btn--ink:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--red); }
@media (hover: hover) {
  html[data-renk="flas"] .btn--ink:hover { background: var(--dark-3); }
  html[data-renk="flas"] .btn--ghost:hover { background: var(--cream-hi); }
}
html[data-renk="flas"] .tlink { text-decoration-color: var(--red); }
html[data-renk="flas"] .tlink:hover { text-decoration-color: var(--ink); }

html[data-renk="flas"] .ibtn { background: var(--cream-hi); box-shadow: var(--sh); transition: transform .12s var(--ease-out), background-color .2s, box-shadow .12s; }
html[data-renk="flas"] .ibtn:active { transform: translate(2px, 2px); box-shadow: var(--sh-press); }
html[data-renk="flas"] .ibtn--ink { background: var(--ink); color: var(--on-dark); box-shadow: 2px 2px 0 var(--red); }
html[data-renk="flas"] .ibtn--ink:active { box-shadow: 0 0 0 var(--red); }
html[data-renk="flas"] .ibtn--dk { background: var(--dark-3); color: var(--on-dark); box-shadow: inset 0 0 0 2px #3d3934, 2px 2px 0 var(--red); }
@media (hover: hover) {
  html[data-renk="flas"] .ibtn:hover { background: #fff; }
  html[data-renk="flas"] .ibtn--ink:hover { background: var(--dark-3); }
  html[data-renk="flas"] .ibtn--dk:hover { background: #3a3632; }
}

html[data-renk="flas"] .tag--ink { color: var(--on-dark); }

/* ---------- Ust cubuk, menu, alt hap ---------- */
html[data-renk="flas"] .logo { background: rgba(255, 250, 240, .94); text-shadow: 2px 2px 0 var(--red); }
html[data-renk="flas"] .logo::after { background: var(--ink); }

html[data-renk="flas"] .menu { background: var(--dark); color: var(--on-dark); }
html[data-renk="flas"] .menu-nav a { border-bottom-color: rgba(240, 234, 219, .16); }
html[data-renk="flas"] .menu-nav a:hover { color: #e5413a; }
html[data-renk="flas"] .menu .ibtn { background: var(--dark-3); color: var(--on-dark); box-shadow: inset 0 0 0 2px #3d3934, 2px 2px 0 var(--red); }
html[data-renk="flas"] .menu .btn--ink { background: var(--red); color: var(--on-red); box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--on-dark); }

html[data-renk="flas"] .pill { background: var(--ink); box-shadow: 3px 3px 0 var(--red); }
html[data-renk="flas"] .pill a { color: var(--on-dark); }
html[data-renk="flas"] .pill a[aria-current="true"] { background: var(--red); color: var(--on-red); }
@media (hover: hover) { html[data-renk="flas"] .pill a:not([aria-current="true"]):hover { background: rgba(240, 234, 219, .12); } }

/* ---------- CSS cikartmalar ---------- */
html[data-renk="flas"] .tape { --t: var(--cream-hi); box-shadow: 0 0 0 6px var(--cream-hi); }
html[data-renk="flas"] .tape-u { color: var(--red); }
html[data-renk="flas"] .okb { color: var(--on-red); box-shadow: 0 0 0 6px var(--cream-hi); }
html[data-renk="flas"] .okb-i { background: var(--cream-hi); color: var(--ink); }
html[data-renk="flas"] .chipfit { background: var(--cream-hi); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 7px var(--cream-hi); }
html[data-renk="flas"] .chipfit--flat { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- Dert cumlesi + ekran goruntuleri ---------- */
html[data-renk="flas"] .shot { background: var(--cream-hi); box-shadow: 0 0 0 6px var(--cream-hi), 0 0 0 8px var(--ink), 6px 6px 0 8px var(--ink); }

/* ---------- Bantlar ---------- */
html[data-renk="flas"] .band { text-shadow: .035em .035em 0 var(--red); }
html[data-renk="flas"] .band-seq svg { --hole: var(--paper); }
html[data-renk="flas"] .row { color: color-mix(in srgb, var(--ink) calc(100% - var(--i) * 19%), var(--paper)); }

/* ---------- Sohbet ---------- */
html[data-renk="flas"] .msg { box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--ink); }
html[data-renk="flas"] .msg--d { background: var(--cream-hi); }
html[data-renk="flas"] .msg--m { background: var(--ink); color: var(--on-dark); box-shadow: 3px 3px 0 var(--red); }
html[data-renk="flas"] .msg--m .who { color: var(--on-dark-mute); }
html[data-renk="flas"] .msg--ok { background: var(--red); color: var(--on-red); box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--ink); }
html[data-renk="flas"] .msg--ok .who { color: var(--on-red); }
html[data-renk="flas"] .msg--ok .okc { background: var(--cream-hi); color: var(--ink); }
html[data-renk="flas"] .lcard { background: var(--paper); }

/* dev dugmeler */
html[data-renk="flas"] .mega--y { color: var(--on-red); box-shadow: inset 0 0 0 3px var(--ink), 5px 5px 0 var(--ink); transition: transform .14s var(--ease-out), background-color .2s, border-radius .3s var(--ease-out), box-shadow .14s; }
html[data-renk="flas"] .mega:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 var(--ink); }

/* ---------- Klasor kartlari: krem / kirmizi / siyah ---------- */
html[data-renk="flas"] .folder { filter: var(--card-filter); }
html[data-renk="flas"] .folder--y { background: var(--cream-hi); }
html[data-renk="flas"] .folder--p { color: var(--on-red); }
html[data-renk="flas"] .folder--p > p { color: var(--on-red); }
html[data-renk="flas"] .num { color: var(--on-dark); }
html[data-renk="flas"] .folder--p .num { background: var(--on-red); color: var(--red); }
/* 3. adim: siyah kart, golgesi kirmizi */
html[data-renk="flas"] .f3 { background: var(--ink); color: var(--on-dark); filter: drop-shadow(5px 5px 0 var(--red)); }
html[data-renk="flas"] .f3 > p { color: #ddd5c3; }
html[data-renk="flas"] .f3 .num { background: var(--on-dark); color: var(--ink); }
html[data-renk="flas"] .thumb--fan { background: var(--paper); }
html[data-renk="flas"] .thumb--body { background: rgba(255, 248, 236, .12); }
html[data-renk="flas"] .thumb--body .tag { box-shadow: 0 0 0 4px var(--cream-hi); }
html[data-renk="flas"] .thumb--link { background: rgba(240, 234, 219, .08); }
html[data-renk="flas"] .lcard--solo { background: var(--cream-hi); }
html[data-renk="flas"] .f3 .lcard--solo { color: var(--ink); }
html[data-renk="flas"] .mini--m { color: var(--on-red); }
html[data-renk="flas"] .mini--d { background: var(--cream-hi); }
html[data-renk="flas"] .count { color: var(--on-dark); }
/* kirmizi kart icindeki ana dugme kirmizi olmasin */
html[data-renk="flas"] .folder--p .btn--y { background: var(--cream-hi); color: var(--ink); }
@media (hover: hover) { html[data-renk="flas"] .folder--p .btn--y:hover { background: #fff; } }

/* ---------- Vucuttaki dovmeler ---------- */
html[data-renk="flas"] .seg button[aria-pressed="true"] { color: var(--on-dark); box-shadow: 0 0 0 2px var(--red); }
html[data-renk="flas"] .fig-stage { background: var(--dark-2); }   /* uygulamadaki gibi koyu sahne */
html[data-renk="flas"] .fig-note { color: var(--mute); }
html[data-renk="flas"] .vis[data-vis="ortulu"] { color: var(--on-dark); }
html[data-renk="flas"] .tbl tr.empty td { color: var(--mute); }
html[data-renk="flas"] .wrapnote { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- Cumle formu ---------- */
html[data-renk="flas"] .sent-p input::placeholder { color: #6a5f4f; }
html[data-renk="flas"] .sent-p input:hover { background: var(--cream-hi); }
html[data-renk="flas"] .sent-p input[aria-invalid="true"] { background: var(--red-wash); }
html[data-renk="flas"] .err { background: var(--red-wash); box-shadow: inset 0 0 0 2px var(--red-press); }

/* ---------- Koyu footer ---------- */
html[data-renk="flas"] .foot { background: var(--dark); color: var(--on-dark); }
html[data-renk="flas"] .foot ::selection { background: var(--red); color: var(--on-red); }
html[data-renk="flas"] .qr { background: var(--cream-hi); box-shadow: 4px 4px 0 var(--red); }
html[data-renk="flas"] .foot-h .mk:hover { --mkc: #e5413a; }
html[data-renk="flas"] .foot-s { color: var(--on-dark-mute); }
html[data-renk="flas"] .foot-links a { background: var(--dark-3); }
html[data-renk="flas"] .foot-links a:hover { background: #3a3632; }
html[data-renk="flas"] .foot-bot { color: var(--on-dark-mute); }

/* az hareket: flash basma efekti de kipirdamasin */
@media (prefers-reduced-motion: reduce) {
  html[data-renk="flas"] .btn:active, html[data-renk="flas"] .ibtn:active, html[data-renk="flas"] .mega:active { transform: none; }
}

html[data-renk="flas"] .stage-logo { text-shadow: .045em .045em 0 var(--red); }