/* HisarBlok — default theme, public stylesheet.
 *
 * Everything here is driven by design tokens on :root. A site restyles the whole thing by
 * redefining a handful of variables in its own stylesheet — no need to rewrite or fight
 * specificity. Every class is namespaced `hb-` so it can never collide with a site's own CSS.
 *
 * Copyright (C) KodHisar Yazılım Hizmetleri. Licensed under AGPL-3.0-or-later.
 */

:root{
  /* colour */
  --hb-bg:        #ffffff;
  --hb-bg-alt:    #f4f7fa;
  --hb-fg:        #16202a;
  --hb-muted:     #5b6b7a;
  --hb-line:      #e2e8ee;
  --hb-accent:    #1e6fb5;
  --hb-accent-fg: #ffffff;
  --hb-card:      #ffffff;

  /* shape and rhythm */
  --hb-radius:  12px;
  --hb-gap:     1.25rem;
  --hb-section: 4rem;
  --hb-measure: 68rem;

  /* type */
  --hb-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --hb-h1:   clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  --hb-h2:   clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --hb-bg:     #0f161d;
    --hb-bg-alt: #151f29;
    --hb-fg:     #e8eef4;
    --hb-muted:  #9fb0c0;
    --hb-line:   #24303d;
    --hb-accent: #4aa3e8;
    --hb-card:   #18232e;
  }
}

/* ---------------------------------------------------------------- structure */
.hb-wrap{max-width:var(--hb-measure);margin-inline:auto;padding-inline:1rem}
.hb-block{padding-block:var(--hb-section);background:var(--hb-bg);color:var(--hb-fg)}
.hb-block.alt{background:var(--hb-bg-alt)}
.hb-block h2{font-size:var(--hb-h2);line-height:1.2;margin:0 0 .6em}
.hb-muted{color:var(--hb-muted);max-width:60ch}

/* ---------------------------------------------------------------- hero */
.hb-hero{padding-block:calc(var(--hb-section) * 1.2);background:var(--hb-bg);color:var(--hb-fg)}
.hb-hero.alt{background:var(--hb-bg-alt)}
.hb-hero-grid{display:grid;gap:calc(var(--hb-gap) * 2);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){ .hb-hero-grid{grid-template-columns:1.05fr 1fr} }
.hb-hero h1{font-size:var(--hb-h1);line-height:1.1;margin:.15em 0 .35em;letter-spacing:-.01em}
.hb-kicker{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
           text-transform:uppercase;color:var(--hb-accent)}
.hb-lead{font-size:1.12rem;line-height:1.65;color:var(--hb-muted);max-width:56ch;margin:0 0 1.4em}
.hb-fine{font-size:.85rem;color:var(--hb-muted);margin:1em 0 0}
.hb-shot{width:100%;height:auto;border-radius:var(--hb-radius);border:1px solid var(--hb-line)}

/* ---------------------------------------------------------------- buttons */
.hb-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.hb-btn{display:inline-block;padding:.72em 1.3em;border-radius:calc(var(--hb-radius) - 4px);
        border:1px solid var(--hb-line);background:var(--hb-card);color:var(--hb-fg);
        font-weight:600;text-decoration:none;line-height:1.2}
.hb-btn:hover{border-color:var(--hb-accent);color:var(--hb-accent)}
.hb-btn-primary{background:var(--hb-accent);border-color:var(--hb-accent);color:var(--hb-accent-fg)}
.hb-btn-primary:hover{filter:brightness(1.08);color:var(--hb-accent-fg)}

/* ---------------------------------------------------------------- cards */
.hb-grid{display:grid;gap:var(--hb-gap);grid-template-columns:1fr;margin-top:1.6rem}
@media (min-width:640px){ .hb-c2,.hb-c3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .hb-c3{grid-template-columns:repeat(3,1fr)} }
.hb-card{background:var(--hb-card);border:1px solid var(--hb-line);border-radius:var(--hb-radius);
         padding:1.4rem}
.hb-card h3{margin:.1em 0 .45em;font-size:1.05rem}
.hb-card p{margin:0;color:var(--hb-muted);line-height:1.65}
.hb-card a{color:var(--hb-accent)}
.hb-ico{font-size:1.6rem;line-height:1;margin-bottom:.5rem}

/* ---------------------------------------------------------------- badges */
.hb-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0}
.hb-chip{display:inline-block;font-size:.82rem;padding:.32em .85em;border-radius:999px;
         border:1px solid var(--hb-line);background:var(--hb-card);color:var(--hb-muted)}

/* ---------------------------------------------------------------- gallery */
.hb-shots{display:grid;gap:var(--hb-gap);grid-template-columns:1fr;margin-top:1.6rem}
@media (min-width:720px){ .hb-shots{grid-template-columns:repeat(2,1fr)} }
.hb-shots figure{margin:0}
.hb-shots img{width:100%;height:auto;border-radius:var(--hb-radius);border:1px solid var(--hb-line);display:block}
.hb-shots figcaption{margin-top:.5rem;font-size:.87rem;color:var(--hb-muted)}

/* ---------------------------------------------------------------- prose */
.hb-prose{max-width:72ch;line-height:1.75;color:var(--hb-fg)}
.hb-prose > :first-child{margin-top:0}
.hb-prose h2,.hb-prose h3{line-height:1.25;margin:1.8em 0 .5em}
.hb-prose p,.hb-prose ul,.hb-prose ol{margin:0 0 1.1em}
.hb-prose a{color:var(--hb-accent)}
.hb-prose code{background:var(--hb-bg-alt);padding:.12em .4em;border-radius:5px;font-size:.9em}
.hb-prose pre{background:var(--hb-bg-alt);padding:1rem;border-radius:var(--hb-radius);overflow:auto}
.hb-prose pre code{background:none;padding:0}
.hb-prose blockquote{margin:0 0 1.1em;padding-left:1rem;border-left:3px solid var(--hb-line);color:var(--hb-muted)}
.hb-prose table{border-collapse:collapse;width:100%;margin:0 0 1.1em}
.hb-prose th,.hb-prose td{border-bottom:1px solid var(--hb-line);padding:.55em .7em;text-align:left}
.hb-prose img{max-width:100%;height:auto;border-radius:var(--hb-radius)}

/* ---------------------------------------------------------------- misc */
.hb-announcements[hidden]{display:none}

/* ---------------------------------------------------------------- search */
.hb-search-input{width:100%;max-width:34rem;padding:.7em 1em;font:inherit;
  border:1px solid var(--hb-line);border-radius:calc(var(--hb-radius) - 4px);
  background:var(--hb-card);color:var(--hb-fg)}
.hb-search-input:disabled{opacity:.6}
.hb-search-status{margin:.6em 0 0;font-size:.9rem}
.hb-search-results{list-style:none;padding:0;margin:1.4rem 0 0}
.hb-search-results li{padding:1rem 0;border-top:1px solid var(--hb-line)}
.hb-search-results a{font-weight:600;font-size:1.05rem;color:var(--hb-accent);text-decoration:none}
.hb-search-results a:hover{text-decoration:underline}
.hb-search-results p{margin:.3em 0 0;color:var(--hb-muted);line-height:1.6;font-size:.93rem}