/* ==========================================================================
   Doğuş Şekerci — dogus.net.tr
   Theming + base styles. Colours are driven by CSS variables that change with
   html[data-theme] (dark|light). Accent is fixed to cyan.
   ========================================================================== */

:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body: 'Public Sans', system-ui, sans-serif;
}

/* --- Theme (dark / light) — accent fixed to cyan ------------------------- */
html[data-theme="dark"] {
  --bg: oklch(0.15 0.012 260);
  --bg2: oklch(0.19 0.014 260);
  --panel: oklch(0.185 0.014 260);
  --border: oklch(0.32 0.014 260);
  --fg: oklch(0.96 0.005 260);
  --fg2: oklch(0.70 0.012 260);
  --onAccent: oklch(0.15 0.012 260);
  --accent: oklch(0.82 0.15 200);
  --accent2: oklch(0.68 0.14 200);
  --glow: oklch(0.82 0.15 200 / 0.14);
  --radius: 8px;
  --shadow: 0 1px 0 0 oklch(1 0 0 / 0.03) inset;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: oklch(0.985 0.003 260);
  --bg2: oklch(0.965 0.004 260);
  --panel: oklch(1 0 0);
  --border: oklch(0.90 0.006 260);
  --fg: oklch(0.24 0.012 260);
  --fg2: oklch(0.50 0.012 260);
  --onAccent: oklch(1 0 0);
  --accent: oklch(0.55 0.16 200);
  --accent2: oklch(0.45 0.15 200);
  --glow: oklch(0.55 0.16 200 / 0.08);
  --radius: 14px;
  --shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 16px 36px -20px oklch(0 0 0 / 0.20);
  color-scheme: light;
}

/* Fallback before the boot script runs / JS disabled: follow the system
   preference, defaulting to light when there is no dark preference. */
html:not([data-theme]) {
  --bg: oklch(0.985 0.003 260); --bg2: oklch(0.965 0.004 260); --panel: oklch(1 0 0);
  --border: oklch(0.90 0.006 260); --fg: oklch(0.24 0.012 260); --fg2: oklch(0.50 0.012 260);
  --onAccent: oklch(1 0 0); --radius: 14px;
  --shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 16px 36px -20px oklch(0 0 0 / 0.20);
  --accent: oklch(0.55 0.16 200); --accent2: oklch(0.45 0.15 200); --glow: oklch(0.55 0.16 200 / 0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: oklch(0.15 0.012 260); --bg2: oklch(0.19 0.014 260); --panel: oklch(0.185 0.014 260);
    --border: oklch(0.32 0.014 260); --fg: oklch(0.96 0.005 260); --fg2: oklch(0.70 0.012 260);
    --onAccent: oklch(0.15 0.012 260); --radius: 8px; --shadow: 0 1px 0 0 oklch(1 0 0 / 0.03) inset;
    --accent: oklch(0.82 0.15 200); --accent2: oklch(0.68 0.14 200); --glow: oklch(0.82 0.15 200 / 0.14);
    color-scheme: dark;
  }
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  transition: background .3s, color .3s;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }
input::placeholder, textarea::placeholder { color: var(--fg2); opacity: .7; }
::selection { background: var(--accent); color: var(--onAccent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

button { font-family: inherit; }
img { max-width: 100%; }

/* --- Hover utilities (replace the design's style-hover bindings) ---------- */
/* Inline styles win over classes, so overrides of inline props use !important. */
.card-hover:hover { border-color: var(--accent) !important; transform: translateY(-3px); }
.btn-bright:hover { filter: brightness(1.08); }
.btn-bright:disabled { opacity: .55; cursor: not-allowed !important; }
.btn-bright:disabled:hover { filter: none; }
.bd-accent:hover { border-color: var(--accent) !important; }
.bd-accent-fg:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.link-accent:hover { color: var(--accent) !important; }
.menu-item:hover { background: var(--bg2) !important; color: var(--fg) !important; }

/* --- Nav links ----------------------------------------------------------- */
.nav-link {
  font-size: 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); padding: 0; color: var(--fg2);
  transition: color .2s; text-decoration: none;
}
.nav-link:hover { color: var(--accent); }
.nav-link.is-active { color: var(--accent); }

/* --- Segmented toggles (TR/EN, dark/light) ------------------------------- */
.seg {
  padding: 7px 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; border: none; cursor: pointer; line-height: 1;
  transition: all .2s; background: transparent; color: var(--fg2); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.seg.is-active { background: var(--accent); color: var(--onAccent); }

/* --- Tools dropdown (hover-opened) ---------------------------------------- */
.nav-tools-wrap { position: relative; }
.tools-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 60; display: none; }
.nav-tools-wrap:hover .tools-menu, .nav-tools-wrap:focus-within .tools-menu { display: block; }

/* --- Blog category chips -------------------------------------------------- */
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--fg2); cursor: pointer; font-size: 13px;
  font-family: var(--font-body); transition: all .2s;
}
.chip:hover { border-color: var(--accent); }
.chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--onAccent); }

/* --- Blog filter helpers -------------------------------------------------- */
.post-card.is-hidden { display: none !important; }

/* --- Tool FAQ accordion (SEO content) ------------------------------------ */
.faq { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 15px; color: var(--fg); display: flex; justify-content: space-between; gap: 12px; align-items: center; list-style: none; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq .faq-ico { color: var(--accent); font-family: var(--font-mono); font-size: 18px; line-height: 1; transition: transform .2s; flex: none; }
.faq[open] .faq-ico { transform: rotate(45deg); }
.faq p { padding: 0 18px 16px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg2); }

/* --- Monitor tool: MRTG-style chart grid (2-up on desktop, 1 on mobile) --- */
.monitor-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .monitor-grid { grid-template-columns: 1fr; } }

/* --- Header layout + responsive ------------------------------------------ */
/* On desktop the collapse wrapper dissolves (display:contents) so the logo,
   nav and controls spread across the header exactly like the original. */
.header-collapse { display: contents; }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.header-controls { display: flex; align-items: center; gap: 10px; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex !important; }
  .header-collapse {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 16px 24px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .site-header.open .header-collapse { display: flex; }
  .site-nav { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
  .site-nav > a, .nav-tools-wrap > a { padding: 11px 0; font-size: 16px; }
  .nav-tools-wrap { width: 100%; }
  .tools-menu { display: none !important; }
  .header-controls { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); }
}

/* --- Tighter spacing on small screens ------------------------------------ */
@media (max-width: 640px) {
  main > section { padding-top: 54px !important; padding-bottom: 54px !important; }
  main > div > section { padding-top: 54px !important; padding-bottom: 54px !important; }
  main > article { padding-top: 40px !important; }
}

/* Footer partner logos (Tres & Netlen) — theme-aware: dark logos on light
   theme, light logos on dark theme. Brand accent colour is kept in both. */
.footer-partners { display: inline-flex; align-items: center; gap: 20px; }
.footer-partner { display: inline-flex; align-items: center; opacity: .8; transition: opacity .18s ease; }
.footer-partner:hover { opacity: 1; }
.footer-partner img { height: 22px; width: auto; display: block; }
.footer-partner .pl-dark { display: none; }
html[data-theme="dark"] .footer-partner .pl-light { display: none; }
html[data-theme="dark"] .footer-partner .pl-dark { display: block; }
@media (max-width: 640px) { .footer-partner img { height: 20px; } .footer-partners { gap: 16px; } }