/* ==========================================================================
   PORTFÖY MINIMAL — Tuna Creative hazır portfolyo teması
   --------------------------------------------------------------------------
   GÖRSEL DÜNYA: koyu tuval, tek sıcak amber vurgu, iş görselleri konuşur.

   NEDEN AMBER: katalogdaki ilk tema (Kurumsal Pro) açık zeminli ve
   lacivert-petrol. İkinci ürün onun renk değişmiş hâli gibi durmamalı.
   Ölçtüğümüz iki ticari tema (merge, Seargin) da neon fıstık kullanıyordu —
   oraya düşmemek için sıcak amber seçildi.

   KURUMSAL PRO'DAN TAŞINAN KURALLAR (denetimde kazanılmıştı, bozmayın):
     · harici istek yok — CDN, ikon fontu, stok simge kullanılmaz
     · `side-tab` (tek yanda kalın renkli kenarlık) yok
     · dekoratif ızgara/çizgi deseni zemin yok
     · degrade metin yok
     · punto büyüdükçe satır sıkışır ve harfler yaklaşır; küçük BÜYÜK HARF
       etikette harfler açılır
     · `ease-in` UI'da kullanılmaz; hareket azaltma sıfır değil, daha yumuşak
   ========================================================================== */

:root {
    /* — Renk — koyu tuval + tek sıcak vurgu */
    --p-bg: #0d0d0f;            /* ana zemin */
    --p-bg-2: #141417;          /* bölüm zemini */
    --p-card: #1a1a1e;          /* kart yüzeyi */
    --p-line: #2a2a30;
    --p-line-strong: #3d3d45;

    --p-ink: #f2f0ed;           /* ana metin */
    --p-ink-soft: #9d9a95;      /* ikincil metin — koyu zeminde 6.4:1 */
    --p-ink-dim: #6e6b67;

    --p-accent: #ff7a29;        /* sıcak amber — eylem ve vurgu */
    --p-accent-soft: #ffa066;
    --p-accent-tint: rgba(255, 122, 41, .14);
    --p-on-accent: #16120e;     /* amber üstünde metin */

    /* — Punto ölçeği — */
    --p-text-xs: 0.75rem;
    --p-text-sm: 0.875rem;
    --p-text-base: 1rem;
    --p-text-lg: 1.125rem;
    --p-text-xl: 1.375rem;
    --p-text-2xl: 1.75rem;
    --p-text-3xl: 2.5rem;
    --p-text-4xl: 3.5rem;
    --p-text-5xl: 5rem;         /* 80px — portfolyoda başlık büyük olur */

    --p-lh-tight: 1.05;
    --p-lh-snug: 1.3;
    --p-lh-normal: 1.65;
    --p-lh-loose: 1.8;
    --p-track-tighter: -0.03em;
    --p-track-tight: -0.015em;
    --p-track-wider: 0.16em;

    --p-space-1: 4px;
    --p-space-2: 8px;
    --p-space-3: 12px;
    --p-space-4: 16px;
    --p-space-5: 24px;
    --p-space-6: 32px;
    --p-space-8: 48px;
    --p-space-10: 72px;
    --p-space-12: 112px;

    --p-radius: 10px;
    --p-radius-lg: 18px;
    --p-radius-pill: 999px;
    --p-shadow: 0 18px 40px rgba(0, 0, 0, .45);

    --p-container: 1240px;
    --p-measure: 34rem;

    --p-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --p-dur-press: 160ms;
    --p-dur-fast: 200ms;
    --p-dur-reveal: 460ms;

    --p-sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .p-reveal { transform: none !important; transition: opacity var(--p-dur-fast) linear !important; }
    .p-btn:active, .p-work:hover { transform: none; }
    .p-nav { transition: opacity var(--p-dur-fast) linear, visibility var(--p-dur-fast) linear; transform: none; }
    .p-nav[data-open="true"] { transform: none; }
    .p-top { transition: opacity var(--p-dur-fast) linear, visibility var(--p-dur-fast) linear; transform: none; }
    .p-top[data-shown] { transform: none; }
}

body {
    margin: 0;
    font-family: var(--p-sans);
    font-size: var(--p-text-base);
    line-height: var(--p-lh-normal);
    color: var(--p-ink);
    background: var(--p-bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--p-accent); text-decoration: none; }
a:hover { color: var(--p-accent-soft); }

:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--p-accent); color: var(--p-on-accent); }

/* ===== Tipografi ===== */

h1, h2, h3 {
    margin: 0 0 var(--p-space-5);
    font-weight: 600;
    line-height: var(--p-lh-tight);
    letter-spacing: var(--p-track-tighter);
}
h1 { font-size: var(--p-text-5xl); }
h2 { font-size: var(--p-text-3xl); line-height: var(--p-lh-snug); }
h3 { font-size: var(--p-text-xl); line-height: var(--p-lh-snug); letter-spacing: var(--p-track-tight); }

h4 {
    margin: 0 0 var(--p-space-4);
    font-size: var(--p-text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--p-track-wider);
    color: var(--p-ink-dim);
}

p { margin: 0 0 var(--p-space-4); }

.p-lead { font-size: var(--p-text-lg); line-height: var(--p-lh-loose); color: var(--p-ink-soft); max-width: var(--p-measure); }
.p-muted { color: var(--p-ink-soft); }
.p-accent { color: var(--p-accent); }

/* Bölüm etiketi — çizgili, portfolyoda hap yerine ince çizgi daha sessiz */
.p-kicker {
    display: inline-flex; align-items: center; gap: var(--p-space-3);
    margin-bottom: var(--p-space-5);
    font-size: var(--p-text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--p-track-wider);
    color: var(--p-accent);
}
.p-kicker::before { content: ""; width: 28px; height: 1px; background: var(--p-accent); }

/* Müsaitlik rozeti — yanıp sönen nokta, freelancer sitelerinin imzası */
.p-status {
    display: inline-flex; align-items: center; gap: var(--p-space-2);
    padding: 7px var(--p-space-4);
    border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-pill);
    font-size: var(--p-text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--p-track-wider);
    color: var(--p-ink-soft);
}
.p-status::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}

.p-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.p-skip {
    position: absolute; left: var(--p-space-4); top: -100px; z-index: 200;
    padding: var(--p-space-3) var(--p-space-5);
    background: var(--p-accent); color: var(--p-on-accent);
    border-radius: var(--p-radius);
    transition: top var(--p-dur-fast) var(--p-ease-out);
}
.p-skip:focus { top: var(--p-space-4); color: var(--p-on-accent); }

/* ===== Düzen ===== */

.p-container { width: 100%; max-width: var(--p-container); margin-inline: auto; padding-inline: var(--p-space-6); }
/* Yalnız proje ızgarası için: dört sütun 1240px'te 286px'lik kartlar üretiyor,
   görselin içindeki detay kayboluyor. Metin sütunları GENİŞLEMEZ — okuma
   ölçüsü ayrı bir kural (--p-measure) ile korunuyor. */
.p-container--genis { max-width: 1440px; }
.p-section { padding-block: var(--p-space-12); }
.p-section--tint { background: var(--p-bg-2); }

/* Hero'nun hemen altındaki bölüm, zemin rengi DEĞİŞMİYORSA üstten daralır:
   hero'nun alt boşluğu + bölümün üst boşluğu üst üste binince ~180px'lik boş
   bir şerit kalıyordu. Zemin değişiyorsa (tint) boşluk zaten okunuyor, dokunma. */
.p-hero + .p-section:not(.p-section--tint) { padding-top: var(--p-space-8); }
.p-head { max-width: 46rem; margin-bottom: var(--p-space-10); }
.p-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--p-space-6); max-width: none; flex-wrap: wrap; }

/* ===== Butonlar ===== */

.p-btn {
    display: inline-flex; align-items: center; gap: var(--p-space-2);
    padding: 15px var(--p-space-6);
    border: 1px solid var(--p-accent); border-radius: var(--p-radius-pill);
    background: var(--p-accent); color: var(--p-on-accent);
    font-size: var(--p-text-sm); font-weight: 600;
    cursor: pointer;
    transition:
        background var(--p-dur-fast) ease,
        border-color var(--p-dur-fast) ease,
        color var(--p-dur-fast) ease,
        transform var(--p-dur-press) var(--p-ease-out);
}
.p-btn:hover { background: var(--p-accent-soft); border-color: var(--p-accent-soft); color: var(--p-on-accent); }
.p-btn:active { transform: scale(0.97); }

.p-btn--ghost { background: transparent; color: var(--p-ink); border-color: var(--p-line-strong); }
.p-btn--ghost:hover { background: transparent; border-color: var(--p-ink); color: var(--p-ink); }

.p-link { font-size: var(--p-text-sm); font-weight: 600; color: var(--p-accent); }
.p-link::after { content: " →"; display: inline-block; transition: transform var(--p-dur-fast) var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .p-link:hover::after { transform: translateX(4px); }
}

/* Geri bağlantısı — ok yön değiştirir, yoksa "ileri" gibi okunur */
/* `display:block` + `width:max-content`: kendi satırında durur ama tıklama
   alanı metin kadar kalır. `inline-block` bırakılırsa yanındaki bölüm etiketi
   aynı satıra yapışıyor. */
.p-link--geri { display: block; width: max-content; margin-bottom: var(--p-space-5); color: var(--p-ink-soft); }
.p-link--geri:hover { color: var(--p-ink); }
.p-link--geri::after { content: none; }
/* Ok ile metin arası margin ile açılır: ::before içindeki sondaki boşluk
   inline-block'ta yutuluyor. */
.p-link--geri::before { content: "←"; display: inline-block; margin-right: 6px; transition: transform var(--p-dur-fast) var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .p-link--geri:hover::before { transform: translateX(-4px); }
}

/* ===== Başlık / gezinme ===== */

.p-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--p-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--p-line);
}
.p-header__inner { display: flex; align-items: center; gap: var(--p-space-6); min-height: 76px; }

.p-logo {
    font-size: var(--p-text-lg); font-weight: 700;
    letter-spacing: var(--p-track-tighter); color: var(--p-ink);
}
.p-logo:hover { color: var(--p-ink); }
.p-logo span { color: var(--p-accent); }

.p-nav { margin-left: auto; }
.p-nav__list { display: flex; gap: var(--p-space-6); list-style: none; margin: 0; padding: 0; }
.p-nav__list a { font-size: var(--p-text-sm); font-weight: 500; color: var(--p-ink-soft); padding-block: var(--p-space-2); }
.p-nav__list a:hover { color: var(--p-ink); }
.p-nav__list a[aria-current="page"] { color: var(--p-ink); box-shadow: inset 0 -2px 0 var(--p-accent); }

.p-burger {
    display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px;
    background: none; border: 1px solid var(--p-line-strong); border-radius: var(--p-radius); cursor: pointer;
}
.p-burger span { display: block; height: 2px; margin: 4px 0; background: var(--p-ink); border-radius: 2px; transition: transform var(--p-dur-fast) var(--p-ease-out), opacity var(--p-dur-fast) var(--p-ease-out); }
.p-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.p-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.p-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== Hero ===== */

.p-hero { padding-block: var(--p-space-12) var(--p-space-10); }
.p-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-5); flex-wrap: wrap; margin-bottom: var(--p-space-8); }
.p-hero__name { font-size: var(--p-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); }
.p-hero h1 { max-width: 16ch; margin-bottom: var(--p-space-6); }
.p-hero h1 em { font-style: normal; color: var(--p-accent); }
.p-hero__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-4); margin-top: var(--p-space-8); }

/* Künye rakamları — ince ayraçlı */
.p-figures {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: var(--p-space-10); border-top: 1px solid var(--p-line);
}
.p-figure { padding: var(--p-space-5) var(--p-space-5) 0 0; }
.p-figure b {
    display: block; font-size: var(--p-text-2xl); font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--p-track-tighter); line-height: 1.1; color: var(--p-ink);
}
.p-figure span { display: block; margin-top: var(--p-space-2); font-size: var(--p-text-xs); text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); }

/* ===== 404 ===== */

.p-404 { min-height: 62vh; display: grid; align-items: center; }
.p-404__no {
    display: block; margin-bottom: var(--p-space-4);
    font-size: var(--p-text-4xl); font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--p-track-wider);
    color: var(--p-accent);   /* düz renk — degrade metin bilinçli olarak yok */
}

/* ===== İş ızgarası =====
   Portfolyonun ana öğesi. Kart değil, GÖRSEL konuşur: çerçeve yok, hover'da
   görsel hafif yakınlaşır ve künye belirir. */

.p-works { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
.p-works--three { grid-template-columns: repeat(3, 1fr); }

/* Sekiz proje 3 sütunda 3+3+2 oluyor ve son satırda tek kartlık boşluk
   kalıyordu. Dört sütunda tam iki satır. Kart daralınca künye satırı sıkışır,
   o yüzden başlık ve etiket alt alta geçiyor. */
.p-works--four { grid-template-columns: repeat(4, 1fr); gap: var(--p-space-5); }
.p-works--four .p-work__meta { display: block; margin-top: var(--p-space-4); }
.p-works--four .p-work__title { font-size: var(--p-text-lg); }
.p-works--four .p-work__tag { display: block; margin-top: var(--p-space-1); }
/* Dar ekran davranışı dosyanın sonundaki duyarlılık bloğunda — burada
   tanımlanırsa `.p-works` kuralı sonradan gelip onu eziyor. */

.p-work { display: block; color: var(--p-ink); }
.p-work__frame {
    position: relative; overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--p-radius-lg);
    background: var(--p-card);
    /* Görsel gelene kadar sessiz bir yer tutucu — desen değil, düz yüzey */
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.p-work__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--p-ease-out); }
.p-work__no {
    position: absolute; z-index: 2; left: var(--p-space-5); top: var(--p-space-5);
    font-size: var(--p-text-xs); font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--p-track-wider);
    color: var(--p-ink-soft);
}
.p-work__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p-space-4); margin-top: var(--p-space-5); }
.p-work__title { font-size: var(--p-text-xl); font-weight: 600; letter-spacing: var(--p-track-tight); margin: 0; }
.p-work__tag { font-size: var(--p-text-xs); text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); flex: none; }

@media (hover: hover) and (pointer: fine) {
    .p-work:hover { color: var(--p-ink); }
    .p-work:hover .p-work__frame img { transform: scale(1.04); }
    .p-work:hover .p-work__title { color: var(--p-accent); }
}

/* Filtre düğmeleri */
.p-filters { display: flex; flex-wrap: wrap; gap: var(--p-space-3); margin-bottom: var(--p-space-8); }
.p-filter {
    padding: 9px var(--p-space-5);
    border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-pill);
    background: transparent; color: var(--p-ink-soft);
    font: inherit; font-size: var(--p-text-sm); font-weight: 500; cursor: pointer;
    transition: border-color var(--p-dur-fast) ease, color var(--p-dur-fast) ease, background var(--p-dur-fast) ease;
}
.p-filter:hover { color: var(--p-ink); border-color: var(--p-ink-soft); }
.p-filter[aria-pressed="true"] { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }

/* ===== Yetenek listesi — numaralı satırlar ===== */

.p-skills { border-top: 1px solid var(--p-line); }
.p-skill {
    display: grid; grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--p-space-6); align-items: baseline;
    padding-block: var(--p-space-6);
    border-bottom: 1px solid var(--p-line);
}
.p-skill__no { font-size: var(--p-text-sm); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: var(--p-accent); }
.p-skill h3 { margin: 0; }
.p-skill p { margin: 0; color: var(--p-ink-soft); font-size: var(--p-text-sm); }

/* ===== Alıntı / referans ===== */

blockquote {
    margin: 0; padding: var(--p-space-8);
    background: var(--p-card); border-radius: var(--p-radius-lg);
    font-size: var(--p-text-xl); font-weight: 500;
    line-height: var(--p-lh-snug); letter-spacing: var(--p-track-tight);
}
blockquote::before { content: "\201C"; color: var(--p-accent); }
blockquote::after { content: "\201D"; color: var(--p-accent); }
blockquote cite {
    display: block; margin-top: var(--p-space-5);
    font-size: var(--p-text-xs); font-style: normal; font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--p-track-wider);
    color: var(--p-ink-dim);
}

/* ===== Hakkımda düzeni ===== */

.p-about { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--p-space-10); align-items: center; }
@media (max-width: 860px) { .p-about { grid-template-columns: 1fr; gap: var(--p-space-8); } }

/* Araç etiketleri — hap değil kutu; hap zaten filtre düğmelerinin biçimi,
   tıklanmayan bir şeyin tıklanabilir görünmesi yanlış olur. */
.p-tags { display: flex; flex-wrap: wrap; gap: var(--p-space-3); }
.p-tags span {
    padding: 9px var(--p-space-5);
    border: 1px solid var(--p-line); border-radius: var(--p-radius);
    background: var(--p-card);
    font-size: var(--p-text-sm); color: var(--p-ink-soft);
}

/* ===== Fotoğraf ===== */

.p-photo {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--p-radius-lg);
    background: var(--p-card);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.p-photo img { width: 100%; height: 100%; object-fit: cover; }
.p-photo--wide { aspect-ratio: 16 / 9; }
.p-photo--work { aspect-ratio: 3 / 2; }

/* ===== Proje künyesi =====
   Detay sayfasının "kim / ne zaman / ne kapsamda" bilgisi. Tablo değil, dizi:
   satır sayısı projeye göre değişir, tablo yapısı boş hücre üretirdi. */

.p-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--p-space-6);
    padding-block: var(--p-space-6);
    border-block: 1px solid var(--p-line);
}
.p-fact dt { font-size: var(--p-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); }
.p-fact dd { margin: var(--p-space-2) 0 0; font-size: var(--p-text-base); font-weight: 500; color: var(--p-ink); }

/* Sonraki proje — sayfa dibinde çıkmaz sokak bırakmamak için */
.p-next {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--p-space-5); flex-wrap: wrap;
    padding-block: var(--p-space-8);
    border-top: 1px solid var(--p-line);
    color: var(--p-ink);
}
.p-next strong { font-size: var(--p-text-2xl); font-weight: 600; letter-spacing: var(--p-track-tighter); }
.p-next span { font-size: var(--p-text-xs); text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); }
@media (hover: hover) and (pointer: fine) {
    .p-next:hover { color: var(--p-ink); }
    .p-next:hover strong { color: var(--p-accent); }
}

/* İkili görsel sırası */
.p-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-5); }
@media (max-width: 860px) { .p-pair { grid-template-columns: 1fr; } }

/* ===== Uzun metin ===== */

.p-prose { max-width: var(--p-measure); }
.p-prose--sonra { margin-top: var(--p-space-8); }
.p-prose p, .p-prose li { line-height: var(--p-lh-loose); color: var(--p-ink-soft); }
/* Metin içi başlık, bölüm başlığından bir kademe küçük: 34rem'lik bir ölçüde
   40px başlık paragrafı ezip sayfayı başlıklar dizisine çeviriyor. */
.p-prose h2 { margin-top: var(--p-space-10); font-size: var(--p-text-2xl); color: var(--p-ink); }
.p-prose h3 { margin-top: var(--p-space-8); color: var(--p-ink); }
/* İlk başlık üstten boşluk almaz — bölüm boşluğu zaten var, ikisi üst üste
   binince metin blok ortada asılı kalıyor. */
.p-prose > :first-child { margin-top: 0; }

/* Yan sütun: ana içeriğin yanında duran metin. Başlığı bir kademe daha küçük,
   yoksa formun etiketlerinden daha güçlü durup dikkati kendine çekiyor. */
.p-prose--yan h2 { font-size: var(--p-text-xl); }
.p-prose--yan h3 { font-size: var(--p-text-base); margin-top: var(--p-space-6); }
.p-prose ul { padding-left: var(--p-space-5); }
.p-prose li { margin-bottom: var(--p-space-2); }

/* ===== Form ===== */

.p-field { display: grid; gap: var(--p-space-2); margin-bottom: var(--p-space-5); }
.p-field label { font-size: var(--p-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--p-track-wider); color: var(--p-ink-dim); }
.p-field input, .p-field textarea, .p-field select {
    width: 100%; padding: 14px var(--p-space-4);
    font: inherit; font-size: var(--p-text-base);
    color: var(--p-ink); background: var(--p-card);
    border: 1px solid var(--p-line-strong); border-radius: var(--p-radius);
    transition: border-color var(--p-dur-fast) ease, box-shadow var(--p-dur-fast) ease;
}
.p-field input:focus, .p-field textarea:focus, .p-field select:focus {
    border-color: var(--p-accent); outline: none; box-shadow: 0 0 0 4px var(--p-accent-tint);
}
.p-field textarea { min-height: 130px; resize: vertical; }
.p-field__hint { font-size: var(--p-text-xs); color: var(--p-ink-dim); }
.p-form__cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--p-space-10); }

/* Hata YALNIZ renkle anlatılmaz: kenarlık + metin + ikon birlikte */
.p-field input[aria-invalid="true"], .p-field textarea[aria-invalid="true"] { border-color: #f87171; }
.p-field__error { display: none; align-items: center; gap: 6px; font-size: var(--p-text-xs); font-weight: 600; color: #f87171; }
.p-field__error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #f87171; color: var(--p-bg); font-size: 11px; }
.p-field__error[data-shown] { display: flex; }

.p-formmsg { display: none; margin-top: var(--p-space-5); padding: var(--p-space-4) var(--p-space-5); border-radius: var(--p-radius); font-size: var(--p-text-sm); }
.p-formmsg[data-shown] { display: block; }
.p-formmsg[data-durum="ok"] { background: rgba(74, 222, 128, .12); color: #86efac; }
.p-formmsg[data-durum="hata"] { background: rgba(248, 113, 113, .12); color: #fca5a5; }

/* ===== Alt bilgi ===== */

.p-footer { padding-block: var(--p-space-10) var(--p-space-6); border-top: 1px solid var(--p-line); font-size: var(--p-text-sm); }
.p-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--p-space-8); }
.p-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--p-space-3); }
.p-footer__about { margin-top: var(--p-space-3); max-width: 26rem; color: var(--p-ink-soft); }
.p-footer a { color: var(--p-ink-soft); }
.p-footer a:hover { color: var(--p-accent); }
.p-footer__bottom {
    display: flex; flex-wrap: wrap; gap: var(--p-space-4); justify-content: space-between;
    margin-top: var(--p-space-10); padding-top: var(--p-space-5);
    border-top: 1px solid var(--p-line);
    font-size: var(--p-text-xs); color: var(--p-ink-dim);
}

/* ===== Yukarı çık ===== */

.p-top {
    position: fixed; z-index: 70; right: var(--p-space-6); bottom: var(--p-space-6);
    width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid var(--p-line-strong); border-radius: 50%;
    background: var(--p-card); color: var(--p-ink);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
    transition:
        opacity var(--p-dur-fast) var(--p-ease-out),
        transform var(--p-dur-fast) var(--p-ease-out),
        visibility var(--p-dur-fast) var(--p-ease-out),
        background var(--p-dur-fast) ease;
}
.p-top[data-shown] { opacity: 1; visibility: visible; transform: none; }
.p-top:hover { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
.p-top:active { transform: scale(.94); }
.p-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Belirme ===== */

.p-reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--p-dur-reveal) var(--p-ease-out), transform var(--p-dur-reveal) var(--p-ease-out);
    transition-delay: calc(var(--p-i, 0) * 70ms);
}
.p-reveal[data-visible] { opacity: 1; transform: none; }

/* ==========================================================================
   Duyarlılık — telefonda hiçbir metin 11px'in altına inmez
   ========================================================================== */

@media (max-width: 1024px) {
    :root { --p-text-5xl: 3.5rem; --p-text-4xl: 2.75rem; --p-text-3xl: 2rem; --p-space-12: 80px; --p-space-10: 56px; }
    .p-works--three, .p-works--four { grid-template-columns: repeat(3, 1fr); }
    .p-skill { grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr); gap: var(--p-space-5); }
    .p-form__cols { grid-template-columns: 1fr; gap: var(--p-space-8); }
    .p-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .p-nav {
        position: fixed; inset: 76px 0 auto;
        margin: 0; padding: var(--p-space-5) var(--p-space-6);
        background: var(--p-bg); border-bottom: 1px solid var(--p-line);
        transform: translateY(-6px); opacity: 0; visibility: hidden;
        transition:
            opacity var(--p-dur-fast) var(--p-ease-out),
            transform var(--p-dur-fast) var(--p-ease-out),
            visibility var(--p-dur-fast) var(--p-ease-out);
    }
    .p-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
    .p-nav__list { flex-direction: column; gap: 0; }
    .p-nav__list a { display: block; padding: var(--p-space-4) 0; border-bottom: 1px solid var(--p-line); }
    .p-burger { display: block; }
    .p-header__inner > .p-btn { display: none; }
    .p-works, .p-works--three { grid-template-columns: 1fr; }
    /* Dört sütunluk ızgara burada ikiye iner; tek sütuna 620px'te geçiyor. */
    .p-works--four { grid-template-columns: repeat(2, 1fr); }
    .p-skill { grid-template-columns: 3rem 1fr; row-gap: var(--p-space-3); }
    .p-skill p { grid-column: 2; }
}

@media (max-width: 620px) {
    :root { --p-text-5xl: 2.5rem; --p-text-4xl: 2rem; --p-text-3xl: 1.625rem; --p-space-12: 64px; --p-space-10: 44px; }
    .p-footer__grid { grid-template-columns: 1fr; }
    .p-works--four { grid-template-columns: 1fr; }
    .p-hero h1 { max-width: none; }
    .p-top { right: var(--p-space-4); bottom: var(--p-space-4); }
    .p-kicker, .p-status, .p-figure span, .p-work__tag, .p-work__no,
    .p-field label, .p-field__hint, .p-footer__bottom, h4, blockquote cite { font-size: max(11px, var(--p-text-xs)); }
}

@media print {
    .p-header, .p-burger, .p-skip, .p-top { display: none; }
}