/* Yener Yiğit Çelik — shared base styles.
   Compiled from the design-tool export; replaces the inline <style> the runtime used to inject.
   Inline element styles still live on the elements; this file holds the globals + responsive rules. */

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #15120d; scroll-behavior: smooth; }
body {
  font-family: 'Archivo', sans-serif;
  background: #15120d;
  color: #efe7d6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #c7562d; color: #15120d; }
a { color: inherit; }

/* Marquee + scroll-cue keyframes (used on the home hero). */
@keyframes ymq  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ycue { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(8px); opacity: .25; } }

/* Reveal-on-scroll: initial hidden state lives in CSS, gated on the `js` class so that
   with JavaScript disabled every section stays fully visible (no content trapped at opacity:0). */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Responsive: collapse the design-tool's two-column inline grids to a single column on small screens. */
@media (max-width: 820px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:0.5fr 1.5fr"],
  [style*="grid-template-columns:1.4fr 0.6fr"],
  [style*="grid-template-columns:1.3fr 0.7fr"],
  [style*="grid-template-columns:0.3fr 1fr"],
  [style*="grid-template-columns:0.3fr 1.1fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:0.4fr 1.1fr 0.5fr"],
  [style*="grid-template-columns:0.34fr 1fr"],
  [style*="grid-template-columns:0.32fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  section[style*="margin:0 auto"],
  footer[style*="margin:0 auto"],
  article[style*="margin:0 auto"] { padding-left: 22px !important; padding-right: 22px !important; }
  nav#topnav { padding-left: 18px !important; padding-right: 18px !important; }
  /* hide the decorative absolute motif that overlaps the Köşe header on mobile */
  [style*="top:140px"][style*="position:absolute"] { display: none !important; }
  [style*="grid-template-columns:0.4fr 1.1fr 0.5fr"] * { text-align: left !important; }
}

/* Phone: the "Şu an / Üzerinde çalıştıklarım" teaser card had 48px padding + a 34px heading,
   which overflowed and clipped its text on narrow screens. Tame padding, let grid items shrink,
   and step the heading down so the longest word fits. */
@media (max-width: 600px) {
  /* drop the grid entirely so children stack as blocks and wrap naturally (avoids grid min-width overflow) */
  [style*="grid-template-columns:0.5fr 1.5fr"] { display: block !important; padding: 26px !important; }
  [style*="grid-template-columns:0.5fr 1.5fr"] > * + * { margin-top: 20px; }
  [style*="grid-template-columns:0.5fr 1.5fr"] [style*="font-size:34px"] { font-size: 25px !important; }
  /* hard guarantee against any right-edge clipping on small phones: break long words, never exceed the card */
  [style*="grid-template-columns:0.5fr 1.5fr"] * { max-width: 100% !important; overflow-wrap: anywhere; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}