/*
Theme Name: Arda Tuğsat Portfolio
Theme URI: https://ardatugsat.com/
Author: Arda Tuğsat
Author URI: https://ardatugsat.com/
Description: A monochrome bento-grid portfolio theme inspired by bricohen.com. Features card-based layout, minimal GSAP animations, film grain texture, and full WordPress Customizer support.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arda-theme
Tags: portfolio, blog, dark, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Film Grain Overlay
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text-heading);
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }

p {
  margin-bottom: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}

a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-text-heading); }

ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

button, input, textarea, select {
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: none; outline: none;
}

/* ==========================================================================
   Selection & Scrollbar
   ========================================================================== */

::selection { background-color: var(--color-text-heading); color: var(--color-bg-page); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg-page); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ==========================================================================
   WordPress Classes
   ========================================================================== */

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

.wp-caption { background: var(--color-bg-card); border: 1px solid var(--color-border); max-width: 100%; padding: 5px; text-align: center; border-radius: var(--radius-md); }
.wp-caption img { margin: 0; padding: 0; }
.wp-caption .wp-caption-text { font-size: 0.75rem; margin: 0; padding: 5px; color: var(--color-text-muted); }

.gallery { margin: 0 auto 1.5em; }
.gallery-item { display: block; text-align: center; width: 100%; }

.sticky { border-left: 2px solid var(--color-text-muted); }
.bypostauthor > .comment-body { border-left: 2px solid var(--color-text-heading); padding-left: 1rem; }