/* =====================================================
   HİKMET ATÖLYESİ - Temel CSS Reset & Tipografi
   css/base.css
   ===================================================== */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Amiri:wght@400;700&display=swap');

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  transition: background-color var(--transition-slow), color var(--transition-slow);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid var(--scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ─── Tipografi ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-light); }

strong, b { font-weight: var(--font-semibold); }
em, i { font-style: italic; }

/* ─── Listeler ─── */
ul, ol { list-style: none; }

/* ─── Medya ─── */
img, video, svg {
  display: block;
  max-width: 100%;
}

/* ─── Form Elementleri ─── */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select {
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* ─── Arapça Metin ─── */
.arabic-text {
  font-family: var(--font-arabic);
  font-size: 1.4em;
  direction: rtl;
  text-align: right;
  line-height: 2;
  letter-spacing: 0;
}

.rtl {
  direction: rtl;
  text-align: right;
}

/* ─── Fayda Sınıfları ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

/* ─── İslami Geometrik Desen Arkaplanı ─── */
.islamic-pattern-bg {
  position: absolute;
  inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230d9488' fill-opacity='1'%3E%3Cpath d='M30 0l8.66 5v10L30 20l-8.66-5V5L30 0zm0 40l8.66 5v10L30 60l-8.66-5V45L30 40zM8.66 10l8.66 5v10L8.66 30 0 25V15L8.66 10zm42.68 0L60 15v10l-8.66 5-8.66-5V15l8.66-5zM8.66 30l8.66 5v10L8.66 50 0 45V35L8.66 30zm42.68 0L60 35v10l-8.66 5-8.66-5V35l8.66-5zM19.02 5l8.66 5v10l-8.66 5L10.36 20V10L19.02 5zm21.96 0l8.66 5v10l-8.66 5-8.66-5V10l8.66-5zM19.02 25l8.66 5v10l-8.66 5L10.36 40V30l8.66-5zm21.96 0l8.66 5v10l-8.66 5-8.66-5V30l8.66-5zM19.02 45l8.66 5v10l-8.66 5L10.36 60V50l8.66-5zm21.96 0l8.66 5v10l-8.66 5-8.66-5V50l8.66-5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ─── Seçim Rengi ─── */
::selection {
  background-color: var(--color-primary-glow);
  color: var(--text-primary);
}

/* ─── Odak Görünürü (Erişilebilirlik) ─── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}