/* =============================================================
   Enes Atalay — styles.css
   xenesatalay.com

   1  Fontlar (self-host)      6  Başlık ve menü
   2  Token'lar                7  Hero
   3  Tema (koyu/açık)         8  Ortak bileşenler
   4  Sıfırlama ve temel       9  Sayfaya özel
   5  Düzen                   10  Form · Altbilgi · Hareket

   Renk kuralı: --ince (firuze) ve --altin metin rengi olarak
   KULLANILMAZ. Kontrastları gövde metni için yetersizdir; yalnız
   çizgi, kenarlık, ayraç ve 24px+ işaretlerde kullanılır.
   ============================================================= */

/* 1 ── Fontlar ─────────────────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/spectral-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/spectral-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/spectral-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/spectral-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/amiri-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* 2 ── Token'lar ───────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* Ham palet — İznik çinisi ve yazma eser kağıdı
     mürekkep #12100E · kağıt #F5F1E8 · kobalt #16457F
     firuze  #2F8E8A · tezhip altını #B4913A · is #5B564C     */

  /* Rol token'ları — gündüz nüshası */
  --zemin:#F5F1E8;
  --yuzey:#EFEADD;
  --metin:#12100E;
  --metin-ikincil:#5B564C;
  --vurgu:#16457F;
  --vurgu-koyu:#0F3462;
  --ince:#2F8E8A;
  --altin:#B4913A;
  --cizgi:rgba(18,16,14,.14);
  --cizgi-guclu:rgba(18,16,14,.30);
  --secim:rgba(22,69,127,.15);
  --odak:#16457F;
  --uyari:#9B2C24;
  --girih-opaklik:.06;

  /* Tipografi */
  --f-baslik:'Spectral',Georgia,'Times New Roman',serif;
  --f-govde:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-arapca:'Amiri','Geeza Pro','Traditional Arabic','Times New Roman',serif;

  --ol--1:.875rem;
  --ol-0:1.0625rem;
  --ol-1:1.33rem;
  --ol-2:1.75rem;
  --ol-3:clamp(1.9rem,1.5rem + 1.4vw,2.25rem);
  --ol-4:clamp(2.15rem,1.6rem + 2.4vw,3rem);
  --ol-5:clamp(2.5rem,1.05rem + 5.4vw,4.5rem);

  /* Boşluk */
  --a1:.25rem; --a2:.5rem;  --a3:.75rem; --a4:1rem;
  --a5:1.5rem; --a6:2rem;   --a7:3rem;   --a8:4rem;
  --bolum-bosluk:clamp(2.5rem,4.5vw,3.5rem);

  /* Ölçü */
  --olcu:34rem;          /* gövde metni: ~66-72 karakter */
  --olcu-yazi:40rem;     /* yazı sayfası: büyütülmüş punto ile ~70-74 karakter */
  --olcu-genis:64rem;    /* sayfa kolonu */
  --kenar:clamp(1.25rem,5vw,3.5rem);
  --yuvarlak:3px;

  --egri:cubic-bezier(.2,.6,.2,1);
  --gecis:160ms var(--egri);
  --gecis-yavas:420ms var(--egri);
}

/* 3 ── Tema ────────────────────────────────────────────────── */
/* Varsayılan gündüz nüshasıdır; gece nüshası yalnız header'daki
   anahtarla açılır ve tercih localStorage'da saklanır.          */
:root[data-tema="koyu"]{
  color-scheme:dark;
  --zemin:#1A1714;
  --yuzey:#242019;
  --metin:#EBE5D8;
  --metin-ikincil:#A79F90;
  --vurgu:#8CB8EC;
  --vurgu-koyu:#B3D0F4;
  --ince:#4FBDB4;
  --altin:#D2B15E;
  --cizgi:rgba(235,229,216,.14);
  --cizgi-guclu:rgba(235,229,216,.32);
  --secim:rgba(140,184,236,.22);
  --odak:#8CB8EC;
  --uyari:#E8877C;
  --girih-opaklik:.10;
}

/* 4 ── Sıfırlama ve temel ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

html{scroll-behavior:smooth}
body{
  background:var(--zemin);
  color:var(--metin);
  font-family:var(--f-govde);
  font-size:var(--ol-0);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
}
::selection{background:var(--secim)}
body,.ust,.alt,input,select,textarea{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}

h1,h2,h3,h4{
  font-family:var(--f-baslik);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1{font-size:var(--ol-4)}
h2{font-size:var(--ol-3)}
h3{font-size:var(--ol-2)}
h4{font-size:var(--ol-1)}
p{text-wrap:pretty}

a{
  color:var(--vurgu);
  text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color var(--gecis),text-decoration-color var(--gecis);
}
a:hover{color:var(--vurgu-koyu)}
:focus-visible{outline:2px solid var(--odak);outline-offset:3px;border-radius:2px}
:target{scroll-margin-top:var(--a6)}

.gizli-gorsel{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.atla{
  position:absolute;left:var(--a4);top:-4rem;z-index:20;
  background:var(--vurgu);color:#F5F1E8;padding:var(--a2) var(--a4);
  border-radius:var(--yuvarlak);transition:top var(--gecis);
}
.atla:focus{top:var(--a3)}

/* 5 ── Düzen ───────────────────────────────────────────────── */
.kabuk{
  width:100%;
  max-width:var(--olcu-genis);
  margin-inline:auto;
  padding-inline:var(--kenar);
}
.olcu{max-width:var(--olcu)}
.bolum{padding-block:var(--bolum-bosluk)}   /* tek kural: bölüm ritmi */
.sahife{position:relative;flex:1 0 auto}


/* 6 ── Başlık ve menü ──────────────────────────────────────── */
.ust{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--cizgi);flex:0 0 auto;
  background:color-mix(in srgb,var(--zemin) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.ust--kaydi{border-bottom-color:var(--cizgi-guclu)}
.ust__ic{
  display:flex;align-items:center;gap:var(--a4);
  min-height:4.25rem;
}
.kunye{
  display:inline-flex;align-items:center;gap:var(--a3);
  font-family:var(--f-baslik);
  font-size:var(--ol-1);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--metin);
  text-decoration:none;
  margin-inline-end:auto;
  transition:color var(--gecis);
}
.kunye:hover{color:var(--vurgu)}
.kunye__portre{
  width:2.4rem;height:2.4rem;flex:none;
  border-radius:50%;object-fit:cover;
  outline:1px solid var(--cizgi-guclu);outline-offset:2px;
  transition:outline-color var(--gecis),transform var(--gecis);
}
.kunye:hover .kunye__portre{outline-color:var(--altin);transform:scale(1.05)}

.gezinti{display:none}
.gezinti ul{display:flex;align-items:center;gap:var(--a5);list-style:none;padding:0;margin:0}
.gezinti a{
  position:relative;
  color:var(--metin);
  text-decoration:none;
  font-size:var(--ol--1);
  padding-block:var(--a2);
}
.gezinti a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--vurgu);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--egri);
}
.gezinti a:hover{color:var(--vurgu)}
.gezinti a:hover::after{transform:scaleX(1)}
.gezinti a[aria-current="page"]{color:var(--vurgu)}
.gezinti a[aria-current="page"]::after{transform:scaleX(1)}

.ust__araclar{display:flex;align-items:center;gap:var(--a2)}
.ikon-dugme{
  display:grid;place-items:center;
  width:2.5rem;height:2.5rem;
  background:none;border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);
  color:var(--metin);cursor:pointer;
  transition:border-color var(--gecis),color var(--gecis);
}
.ikon-dugme:hover{border-color:var(--vurgu);color:var(--vurgu);background:var(--yuzey)}
.ikon-dugme:active{transform:scale(.94)}
.ikon-dugme{transition:border-color var(--gecis),color var(--gecis),background var(--gecis),transform var(--gecis)}
.ikon-dugme svg{width:1.15rem;height:1.15rem;transition:transform .45s var(--egri)}
#tema-dugmesi[aria-pressed="true"] svg{transform:rotate(180deg)}

/* Menü düğmesi metinli: ikon ve yazı yan yana dursun.
   Bu kural aşağıdaki 720px media query'sinden ÖNCE durmalı,
   yoksa masaüstünde de görünür. */
#menu-dugmesi{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;padding-inline:var(--a3);gap:.45rem;font-size:var(--ol--1);
}
#menu-dugmesi svg{flex:none}

/* Mobil panel: yerleşimi bozmadan açılan, sayfa akışında bir blok */
.mobil-gezinti{
  display:block;
  border-top:1px solid var(--cizgi);
  padding-block:var(--a3) var(--a5);
}
.mobil-gezinti[hidden]{display:none}
.mobil-gezinti ul{list-style:none;padding:0;margin:0}
.mobil-gezinti li + li{border-top:1px solid var(--cizgi)}
.mobil-gezinti a{
  display:block;padding-block:var(--a3);
  text-decoration:none;color:var(--metin);
}
.mobil-gezinti a[aria-current="page"]{color:var(--vurgu)}

@media (min-width:720px){
  .gezinti{display:block}
  #menu-dugmesi{display:none}
  .mobil-gezinti{display:none}
}

/* 7 ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.75rem,7vw,5rem) clamp(2rem,5vw,3.5rem)}
.hero__girih{
  position:absolute;
  top:-14%;right:-16%;
  width:min(46rem,78vw);
  height:auto;
  color:var(--vurgu);
  opacity:var(--girih-opaklik);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
}
.hero__ic{position:relative}
.hero__baslik{display:block;margin:0}
.hero__ad{
  display:block;
  font-family:var(--f-baslik);
  font-size:var(--ol-1);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--metin-ikincil);
  margin-bottom:var(--a5);
}
.hero__tanim{
  display:block;
  font-size:var(--ol-5);
  line-height:1.02;
  letter-spacing:-.025em;
  max-width:24ch;   /* "Camide bir saf önde;" tek satırda kalsın diye ölçülü */
  font-weight:700;
}
/* Sayfadaki tek altın: kimliğin iki yarısını ayıran noktalı virgül. */
.hero__ayrim{color:var(--altin)}
.hero__acilim{
  max-width:var(--olcu);
  margin-top:var(--a6);
  font-size:var(--ol-1);
  line-height:1.55;
  color:var(--metin-ikincil);
}
.hero__eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a5);margin-top:var(--a6)}

/* Sayfa başlığı (ana sayfa dışındaki sayfalar) */
.sayfa-basi{padding-block:clamp(2.5rem,6vw,4.5rem) var(--a6)}
.sayfa-basi h1{max-width:18ch}
.sayfa-basi + .bolum{padding-block-start:var(--a6)}
.sayfa-basi__giris{max-width:var(--olcu);margin-top:var(--a5);font-size:var(--ol-1);line-height:1.55;color:var(--metin-ikincil)}

/* 8 ── Ortak bileşenler ────────────────────────────────────── */
.dugme{
  display:inline-block;
  background:var(--vurgu);color:var(--zemin);
  padding:.7rem 1.5rem;border:1px solid var(--vurgu);
  border-radius:var(--yuvarlak);
  font-size:var(--ol--1);font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:background var(--gecis),border-color var(--gecis),
             transform var(--gecis),box-shadow var(--gecis);
}
.dugme:hover{
  background:var(--vurgu-koyu);border-color:var(--vurgu-koyu);color:var(--zemin);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--vurgu) 55%,transparent);
}
.dugme:active{transform:translateY(0) scale(.985);box-shadow:none}
.dugme-metin{
  font-size:var(--ol--1);font-weight:500;color:var(--metin);
  text-decoration:none;
  padding-bottom:.2em;
  background-image:
    linear-gradient(var(--cizgi-guclu),var(--cizgi-guclu)),
    linear-gradient(var(--vurgu),var(--vurgu));
  background-size:100% 1px,0 2px;
  background-position:0 100%,0 100%;
  background-repeat:no-repeat;
  transition:background-size .3s var(--egri),color var(--gecis);
}
.dugme-metin:hover{color:var(--vurgu);background-size:100% 1px,100% 2px}

/* Durak: yazma eserlerde ayet sonunu gösteren gül. Burada bölüm ayracı:
   ikonun iki yanından kenarlara doğru sönümlenen bir saç teli çizgi. */
.durak{
  border:0;height:1.35rem;width:100%;
  margin:0;position:relative;
  background:var(--ince);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='4.6' y='4.6' width='14.8' height='14.8'/%3E%3Crect x='4.6' y='4.6' width='14.8' height='14.8' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.1'/%3E%3C/svg%3E") center/1.35rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='4.6' y='4.6' width='14.8' height='14.8'/%3E%3Crect x='4.6' y='4.6' width='14.8' height='14.8' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.1'/%3E%3C/svg%3E") center/1.35rem no-repeat;
  opacity:.75;
}
.durak-kap{position:relative;display:flex;align-items:center;gap:var(--a4)}
.durak-kap::before,.durak-kap::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--cizgi-guclu));
}
.durak-kap::after{background:linear-gradient(to left,transparent,var(--cizgi-guclu))}
.durak-kap .durak{width:1.35rem;flex:none}

.bolum-basligi{font-size:var(--ol-2);margin-bottom:var(--a5)}
.bolum-basligi + .bolum-giris{max-width:var(--olcu);margin-top:calc(var(--a5) * -1 + var(--a3));margin-bottom:var(--a6);color:var(--metin-ikincil)}

/* Üç alan */
.ucluk{display:grid;gap:var(--a6);grid-template-columns:1fr}
@media (min-width:760px){.ucluk{grid-template-columns:repeat(3,1fr);gap:var(--a5)}}
.alan{border-top:1px solid var(--cizgi-guclu);padding-top:var(--a4)}
.alan h3{font-size:var(--ol-1);margin-bottom:var(--a3)}
.alan p{color:var(--metin-ikincil);font-size:1rem;line-height:1.6}

/* İş listesi (kart değil, satır) */
.isler{list-style:none;padding:0;margin:0;border-top:1px solid var(--cizgi)}
.is{
  border-bottom:1px solid var(--cizgi);padding-block:var(--a5);
  padding-inline:var(--a4);margin-inline:calc(var(--a4) * -1);
  border-radius:var(--yuvarlak);
  transition:background var(--gecis-yavas);
}
.is:hover{background:var(--yuzey)}
.is__ad{transition:color var(--gecis)}
.is:hover .is__ad{color:var(--vurgu)}
.is__ust{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a4);flex-wrap:wrap}
.is__ad{font-family:var(--f-baslik);font-size:var(--ol-2);font-weight:600;line-height:1.2;letter-spacing:-.012em}
.durum{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--ol--1);color:var(--metin-ikincil);white-space:nowrap;
}
/* İşaret olarak yuvarlak nokta değil durak kullanılıyor: ayet sonunu
   gösteren mark, hâlâ çalışan bir sistemi göstermek için de uygun. */
.durum::before{
  content:"";width:.85rem;height:.85rem;flex:none;background:var(--altin);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center/.85rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center/.85rem no-repeat;
}
.durum[data-durum="tamamlandi"]::before{background:var(--metin-ikincil);opacity:.55}
.is__ozet{margin-top:var(--a3);max-width:var(--olcu)}
.kunye-liste{
  display:grid;grid-template-columns:max-content 1fr;
  gap:var(--a1) var(--a4);
  margin-top:var(--a4);font-size:var(--ol--1);
}
.kunye-liste dt{color:var(--metin-ikincil)}
.kunye-liste dd{margin:0}

/* Süzgeç */
.suzgec{display:flex;flex-wrap:wrap;gap:var(--a2);padding:0;margin:0 0 var(--a6);list-style:none}
.suzgec a{
  display:inline-block;padding:.4rem .9rem;
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  color:var(--metin);text-decoration:none;font-size:var(--ol--1);
  transition:border-color var(--gecis),color var(--gecis),
             background var(--gecis),transform var(--gecis);
}
.suzgec a:hover{
  border-color:var(--vurgu);color:var(--vurgu);
  background:var(--yuzey);transform:translateY(-1px);
}
.suzgec a:active{transform:translateY(0)}
.suzgec a[aria-current="true"]{border-color:var(--vurgu);color:var(--vurgu);background:var(--yuzey)}
.liste-alti{margin-top:var(--a5)}
.suzgec-sonuc{font-size:var(--ol--1);color:var(--metin-ikincil);margin-bottom:var(--a4)}

/* Yazı listesi — kapak görselli */
.yazilar{list-style:none;padding:0;margin:0;border-top:1px solid var(--cizgi)}
.yazi-ozet{
  border-bottom:1px solid var(--cizgi);padding-block:var(--a5);
  display:grid;gap:var(--a4);
}
.yazi-ozet{
  padding-inline:var(--a4);margin-inline:calc(var(--a4) * -1);
  border-radius:var(--yuvarlak);
  transition:background var(--gecis-yavas);
}
.yazi-ozet:hover{background:var(--yuzey)}
.yazi-ozet__gorsel{
  display:block;line-height:0;
  border-radius:var(--yuvarlak);overflow:hidden;
  outline:1px solid var(--cizgi);
}
.yazi-ozet__gorsel img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s var(--egri);
}
.yazi-ozet:hover .yazi-ozet__gorsel img{transform:scale(1.05)}
@media (min-width:700px){
  .yazi-ozet{grid-template-columns:minmax(0,1fr) 14rem;align-items:center;gap:var(--a6)}
  .yazi-ozet__gorsel{grid-column:2;grid-row:1}
  .yazi-ozet__icerik{grid-column:1;grid-row:1}
}
.yazi-ozet__kategori,.makale__kategori{
  display:flex;align-items:center;gap:var(--a3);
  font-size:var(--ol--1);color:var(--metin-ikincil);
}
.yazi-ozet__kategori::before,.makale__kategori::before{
  content:"";width:1.4rem;height:1px;background:var(--ince);flex:none;
}
.yazi-ozet__ad{font-size:var(--ol-2);margin-block:var(--a2)}
.yazi-ozet__ad a{color:var(--metin);text-decoration:none;transition:color var(--gecis)}
.yazi-ozet:hover .yazi-ozet__ad a{color:var(--vurgu)}
.yazi-ozet p{max-width:var(--olcu);color:var(--metin-ikincil)}
.tarih{display:block;font-size:var(--ol--1);color:var(--metin-ikincil);margin-top:var(--a3)}

/* 9 ── Sayfaya özel ────────────────────────────────────────── */
/* Hakkımda */
.tanitim{display:grid;gap:var(--a7);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .tanitim{grid-template-columns:minmax(0,var(--olcu)) 1fr;gap:var(--a8)}
}
.tanitim p + p{margin-top:var(--a5)}
.portre{
  width:min(17rem,70%);
  border-radius:var(--yuvarlak);
  outline:1px solid var(--cizgi);
  outline-offset:.6rem;
}
.portre-kap{margin-block-start:var(--a3)}
.portre-kap picture{display:block}
.portre-kap figcaption{margin-top:var(--a5);font-size:var(--ol--1);color:var(--metin-ikincil);max-width:22rem}

.ozgecmis{display:grid;gap:var(--a7);max-width:var(--olcu-genis)}
.kayitlar{list-style:none;padding:0;margin:0}
.kayit{border-top:1px solid var(--cizgi);padding-block:var(--a4)}
.kayit__ad{font-family:var(--f-baslik);font-size:var(--ol-1);font-weight:600;line-height:1.25}
.kayit__yer{color:var(--metin-ikincil);font-size:var(--ol--1);margin-top:var(--a1)}
.kayit__not{margin-top:var(--a2);max-width:var(--olcu)}
.kayit__yil{font-size:var(--ol--1);color:var(--metin-ikincil);margin-top:var(--a1)}

.beceriler{display:grid;gap:var(--a6);grid-template-columns:1fr}
@media (min-width:760px){.beceriler{grid-template-columns:repeat(2,1fr);gap:var(--a7) var(--a6)}}
.beceri h3{font-size:var(--ol-1);border-top:1px solid var(--cizgi-guclu);padding-top:var(--a3)}
.beceri ul{list-style:none;padding:0;margin-top:var(--a3);columns:2;column-gap:var(--a5)}
.beceri li{break-inside:avoid;padding-block:.18rem;font-size:var(--ol--1);color:var(--metin-ikincil)}
@media (max-width:520px){.beceri ul{columns:1}}

/* Makale: sütun geniş ekranda sola sıkışmasın — ortalanır,
   ölçü --olcu-yazi'ya çıkar, punto bir tık büyür. */
.makale{max-width:var(--olcu-yazi);margin-inline:auto;line-height:1.75}
.makale p{margin-top:var(--a5)}
.makale h2{font-size:var(--ol-2);margin-top:var(--a7)}
.makale h3{font-size:var(--ol-1);margin-top:var(--a6)}
.makale ul{margin-top:var(--a4);padding-inline-start:1.15rem}
.makale li + li{margin-top:var(--a2)}
.makale__ust{max-width:var(--olcu-yazi);margin-inline:auto;margin-bottom:var(--a6)}
/* Kapak: metin sütunundan bir parmak taşar, sayfaya nefes verir. */
.makale__kapak{max-width:min(48rem,100%);margin:0 auto var(--a7)}
.makale__kapak img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--yuvarlak);outline:1px solid var(--cizgi);
}
.makale__kapak figcaption{
  margin-top:var(--a3);font-size:var(--ol--1);color:var(--metin-ikincil);
}
.makale__ust h1{margin-block:var(--a3);font-size:var(--ol-4)}
.makale__giris{font-size:var(--ol-1);line-height:1.55;color:var(--metin-ikincil)}

@media (min-width:900px){
  .makale{font-size:1.125rem}
}

/* Arapça: gerçek Naskh, doğru yön, harekeler için geniş satır. */
.arapca{
  font-family:var(--f-arapca);
  font-size:1.65em;
  line-height:2.05;
  font-weight:400;
  margin-top:var(--a6);
  padding-inline-start:var(--a5);
  border-inline-start:2px solid var(--ince);
}
.arapca p{margin:0}
.arapca__kaynak{
  display:block;direction:ltr;text-align:right;
  font-family:var(--f-govde);font-size:.55em;line-height:1.6;
  color:var(--metin-ikincil);margin-top:var(--a3);
}
.meal{margin-top:var(--a4);color:var(--metin)}

.alinti{
  border-inline-start:2px solid var(--cizgi-guclu);
  padding-inline-start:var(--a5);
  margin-top:var(--a6);
  font-family:var(--f-baslik);font-size:var(--ol-1);line-height:1.5;
}
.alinti p{margin:0}
.alinti footer{font-family:var(--f-govde);font-size:var(--ol--1);color:var(--metin-ikincil);margin-top:var(--a3)}

.makale-alt{border-top:1px solid var(--cizgi);margin-top:var(--a8);padding-top:var(--a5);max-width:var(--olcu-yazi);margin-inline:auto}
.makale-alt__etiket{font-size:var(--ol--1);color:var(--metin-ikincil);margin-bottom:var(--a3)}
.yazi-kart{
  display:grid;gap:var(--a4);align-items:center;
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:var(--a4);
  text-decoration:none;color:var(--metin);
  transition:border-color var(--gecis);
}
.yazi-kart{
  transition:border-color var(--gecis),transform var(--gecis),box-shadow var(--gecis-yavas);
}
.yazi-kart:hover{
  border-color:var(--vurgu);color:var(--metin);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--metin) 35%,transparent);
}
.yazi-kart:active{transform:translateY(-1px)}
@media (min-width:600px){.yazi-kart{grid-template-columns:11rem minmax(0,1fr)}}
.yazi-kart__cerceve{
  display:block;border-radius:2px;overflow:hidden;
  outline:1px solid var(--cizgi);line-height:0;
}
.yazi-kart__gorsel{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s var(--egri);
}
.yazi-kart:hover .yazi-kart__gorsel{transform:scale(1.05)}
.yazi-kart__kategori{display:block;font-size:var(--ol--1);color:var(--metin-ikincil)}
.yazi-kart__ad{
  display:block;font-family:var(--f-baslik);font-weight:600;
  font-size:var(--ol-1);line-height:1.25;margin-top:var(--a1);
  transition:color var(--gecis);
}
.yazi-kart:hover .yazi-kart__ad{color:var(--vurgu)}
.yazi-kart__ozet{display:block;font-size:var(--ol--1);color:var(--metin-ikincil);margin-top:var(--a2)}
.makale-alt > p:last-child{margin-top:var(--a5)}

/* Hizmetler */
.hizmetler{list-style:none;padding:0;margin:0;border-top:1px solid var(--cizgi)}
.hizmet{
  border-bottom:1px solid var(--cizgi);padding-block:var(--a4);
  padding-inline:var(--a4);margin-inline:calc(var(--a4) * -1);
  border-radius:var(--yuvarlak);
  transition:background var(--gecis-yavas);
}
.hizmet:hover{background:var(--yuzey)}
.hizmet h3{font-size:var(--ol-1);transition:color var(--gecis)}
.hizmet:hover h3{color:var(--vurgu)}
.hizmet p{margin-top:var(--a2);color:var(--metin-ikincil);max-width:var(--olcu)}

.iletisim-duzen{display:grid;gap:var(--a8);grid-template-columns:1fr}
@media (min-width:900px){.iletisim-duzen{grid-template-columns:1fr minmax(0,22rem);gap:var(--a8)}}
.dogrudan dl{display:grid;gap:var(--a4);margin-top:var(--a4)}
.dogrudan dt{font-size:var(--ol--1);color:var(--metin-ikincil)}
.dogrudan dd{margin:0}

/* 10 ── Form ───────────────────────────────────────────────── */
.form{max-width:var(--olcu)}
.alan-grubu{margin-top:var(--a5)}
.alan-grubu > label{display:block;font-size:var(--ol--1);margin-bottom:var(--a2)}
input,select,textarea{
  width:100%;
  background:var(--zemin);
  color:var(--metin);
  border:1px solid var(--cizgi-guclu);
  border-radius:var(--yuvarlak);
  padding:.7rem .85rem;
  font-size:1rem;
}
textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
select{appearance:none;background-image:none}
input:hover,select:hover,textarea:hover{border-color:var(--metin-ikincil)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--vurgu);
  box-shadow:0 0 0 3px var(--secim);
}
[aria-invalid="true"]{border-color:var(--uyari)}
.hata{display:block;color:var(--uyari);font-size:var(--ol--1);margin-top:var(--a2)}
.hata:empty{display:none}
.onay{display:flex;align-items:flex-start;gap:var(--a3);margin-top:var(--a5)}
.onay input{width:auto;flex:none;margin-top:.4rem}
.onay label{font-size:var(--ol--1);color:var(--metin-ikincil);margin:0}
.form__gonder{margin-top:var(--a6)}
.form-durum{margin-top:var(--a4);font-size:var(--ol--1)}
.form-durum[data-tip="hata"]{color:var(--uyari)}
.bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* 11 ── Altbilgi ───────────────────────────────────────────── */
.alt{
  border-top:1px solid var(--cizgi);
  margin-top:var(--bolum-bosluk);
  padding-block:var(--a7);
  font-size:var(--ol--1);
  flex:0 0 auto;
}
.alt__ic{display:grid;gap:var(--a6);grid-template-columns:1fr}
@media (min-width:720px){.alt__ic{grid-template-columns:1.6fr 1fr 1fr}}
.alt h2{font-size:var(--ol--1);font-family:var(--f-govde);font-weight:600;margin-bottom:var(--a3)}
.alt ul{list-style:none;padding:0;margin:0}
.alt li + li{margin-top:var(--a2)}
.alt a{color:var(--metin);text-decoration:none}
.alt a:hover{color:var(--vurgu);text-decoration:underline}
.alt__soz{color:var(--metin-ikincil);max-width:24rem}
.alt__telif{margin-top:var(--a6);color:var(--metin-ikincil);font-size:var(--ol--1)}

/* Kapanış çağrısı */
.cagri{max-width:var(--olcu)}
.cagri h2{font-size:var(--ol-3)}
.cagri p{margin-top:var(--a4);color:var(--metin-ikincil)}
.cagri .hero__eylem{margin-top:var(--a5)}

/* 12 ── Hareket: sayfa açılışında tek koreografi ───────────── */
@keyframes girih-belir{from{opacity:0}to{opacity:var(--girih-opaklik)}}
@keyframes belir{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}
.hero__ad{animation:belir .55s .25s both cubic-bezier(.2,.6,.2,1)}
.hero__tanim{animation:belir .6s .34s both cubic-bezier(.2,.6,.2,1)}
.hero__acilim{animation:belir .6s .5s both cubic-bezier(.2,.6,.2,1)}
.hero__eylem{animation:belir .6s .6s both cubic-bezier(.2,.6,.2,1)}
.hero__girih{animation:girih-belir 1.1s .1s both ease-out}

/* Görünüme girince canlanma. .canlanacak sınıfını yalnız JavaScript
   ekler; JS kapalıyken hiçbir içerik gizli kalmaz. */
.canlanacak{opacity:0;transform:translateY(18px)}
.canlandi{
  opacity:1;transform:none;
  transition:opacity .55s var(--egri),transform .55s var(--egri);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .hero__ad,.hero__tanim,.hero__acilim,.hero__eylem,.hero__girih{
    animation:none;opacity:1;transform:none;
  }
}

/* 13 ── Baskı ──────────────────────────────────────────────── */
@media print{
  .ust,.alt,.hero__girih,.suzgec{display:none}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}