/* YAZI TİPLERİ KENDİ SUNUCUMUZDAN — Google Fonts değil.
   Sebep: dış kaynak engellenince tarayıcı yedek fonta düşüyor, yedek font
   aynı puntoda daha geniş yazıyor ve dev başlıklar taşıyor. Sayfa bizde
   düzgün, müşterinin ağında bozuk görünüyor (10 Eylül 2026, Mary Nails).
   Dosyalar `f/` altında, üreten araç: tools/font-yerelestir.mjs
   Yeni ağırlık/aile gerekiyorsa oraya ekle ve aracı tekrar koş. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/plus-jakarta-sans-1-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/plus-jakarta-sans-2-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/plus-jakarta-sans-1-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/plus-jakarta-sans-2-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/plus-jakarta-sans-1-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/plus-jakarta-sans-2-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/plus-jakarta-sans-1-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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/plus-jakarta-sans-2-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: 'Newsreader';
  font-style: italic; font-weight: 300; font-display: swap;
  src: url('f/newsreader-i1-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: 'Newsreader';
  font-style: italic; font-weight: 300; font-display: swap;
  src: url('f/newsreader-i2-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: 'Newsreader';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('f/newsreader-i1-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: 'Newsreader';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('f/newsreader-i2-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: 'Newsreader';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('f/newsreader-3-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: 'Newsreader';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('f/newsreader-4-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: 'Newsreader';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/newsreader-3-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: 'Newsreader';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/newsreader-4-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: 'Newsreader';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/newsreader-3-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: 'Newsreader';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/newsreader-4-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: 'DM Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/dm-sans-5-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: 'DM Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/dm-sans-6-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: 'DM Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/dm-sans-5-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: 'DM Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/dm-sans-6-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: 'Bricolage Grotesque';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('f/bricolage-grotesque-1-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: 'Bricolage Grotesque';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('f/bricolage-grotesque-2-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: 'Inter Tight';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/inter-tight-3-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: 'Inter Tight';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/inter-tight-4-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: 'Inter Tight';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/inter-tight-3-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: 'Inter Tight';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/inter-tight-4-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: 'Inter Tight';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/inter-tight-3-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: 'Inter Tight';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/inter-tight-4-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: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/jetbrains-mono-5-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: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/jetbrains-mono-6-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: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/jetbrains-mono-5-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: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/jetbrains-mono-6-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: 'Baloo 2';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/baloo-2-7-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: 'Baloo 2';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/baloo-2-8-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: 'Baloo 2';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/baloo-2-7-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: 'Baloo 2';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/baloo-2-8-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: 'Baloo 2';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('f/baloo-2-7-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: 'Baloo 2';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('f/baloo-2-8-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: 'Big Shoulders Display';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('f/big-shoulders-display-9-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: 'Big Shoulders Display';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('f/big-shoulders-display-10-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: 'DM Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/dm-mono-11-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: 'DM Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/dm-mono-12-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: 'DM Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/dm-mono-13-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: 'DM Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/dm-mono-14-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: 'Fraunces';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('f/fraunces-i15-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: 'Fraunces';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('f/fraunces-i16-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: 'Fraunces';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('f/fraunces-17-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: 'Fraunces';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('f/fraunces-18-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: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/inter-19-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: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/inter-20-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: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/inter-19-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: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/inter-20-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: 'Nunito';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/nunito-21-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: 'Nunito';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/nunito-22-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: 'Nunito';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/nunito-21-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: 'Nunito';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/nunito-22-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: 'Patrick Hand';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/patrick-hand-23-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: 'Patrick Hand';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/patrick-hand-24-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: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/schibsted-grotesk-25-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: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/schibsted-grotesk-26-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;
}

/* YEDEK YÜZLER — font hiç gelmezse (dosya 404, ağ kesildi, eski tarayıcı).
   Ölçüldü (12 Eylül 2026, canlı sayfa, 100px, aynı metin):
     Bricolage 'wdth' 90 : Arial = %78  → Arial AYNI puntoda %28 GENİŞ yazıyor
     Inter Tight         : Arial = %95
   Yani yedek font taşmanın kendisi. `size-adjust` ölçüyü yaklaştırıyor,
   böylece dev başlık yedeğe düşse de kabından taşmıyor. Zincir kasten kısa:
   her ekstra aile bir ölçü belirsizliği. */
@font-face { font-family: 'Yedek Baslik'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 80%; }
@font-face { font-family: 'Yedek Govde';  src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 95%; }
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/schibsted-grotesk-25-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: 'Schibsted Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/schibsted-grotesk-26-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;
}

/* namlistudyo.com — Namlı Studio.
   ─────────────────────────────────────────────────────────────────────────
   FİKİR: VİTRİN. Stüdyo, işletmenin internetteki vitrinini kuruyor; sayfa da
   bir vitrin gibi davranıyor: camların arkasında GERÇEK siteler duruyor,
   kepenk kalkınca görünüyor, üstüne gelince "AÇ" diyor.

   Renk: beton kâğıdı + mürekkep + tabela sarısı. Sarı bir "ışık" — sayfanın
   %3'ünden azını kaplıyor (seçim, imleç, numara, tek çizgi). Krem+kiremit ve
   siyah+mor klişelerinin ikisi de bilerek dışarıda.
   Yazı: Bricolage Grotesque (display; opsz/wdth ekseni tabela harfi gibi
   sıkışıp açılıyor) + Inter Tight (metin) + JetBrains Mono (künye).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --kagit:    #EDECE7;
  --kagit-2:  #E2E0D9;
  --murekkep: #111114;
  --koyu:     #141417;
  --koyu-2:   #1C1C21;
  --acik:     #ECEAE4;   /* koyu zeminde metin; saf beyaz değil */
  --gri:      #5E5F66;   /* kâğıt üstünde 5.6:1 */
  --gri-k:    #9A9BA3;   /* koyu üstünde 5.4:1 */
  --cizgi:    rgba(17, 17, 20, 0.14);
  --cizgi-k:  rgba(236, 234, 228, 0.16);
  --sari:     #F4C430;
  --sari-k:   #C99A12;   /* kâğıt üstünde okunur sarı (metin için) 3.1:1 — yalnız büyük punto */

  --f-display: 'Bricolage Grotesque', 'Yedek Baslik', system-ui, sans-serif;
  --f-govde:   'Inter Tight', 'Yedek Govde', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --kenar: clamp(1.1rem, 4.5vw, 5rem);
  --ust-bosluk: clamp(5rem, 12vw, 11rem);
  --gecis: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Tasma bekcisi HEM html HEM body'de. iOS Safari'de yalniz `body`ye
   yazmak yatay kaymayi durdurmuyor; masaustu Chrome'da durduruyor, o
   yuzden taklitte hic gorunmedi (11 Eylul 2026: telefonda yazilarin sag
   ucu ekran disinda kaliyordu). `hidden` eski Safari yedegi, `clip`
   sticky ogeleri bozmadigi icin tercih. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Sabit nav 65-74px. Bolum capasina atlayinca ilk satir cubugun arkasinda
   kalmasin diye pay. Lenis aciksa ayni pay studyo.js'te de var. */
section[id], main[id], [id="fark"], [id="isler"], [id="surec"], [id="konus"] { scroll-margin-top: 6rem; }
html.lenis { scroll-behavior: auto; }
body {
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 1.0625rem/1.55 var(--f-govde);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--sari); color: var(--murekkep); }
:focus-visible { outline: 2px solid var(--sari); outline-offset: 3px; }

/* Gren: beton kâğıdının düzlüğünü kıran tek doku. */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kap { width: min(96rem, 100%); margin-inline: auto; padding-inline: var(--kenar); }
.mono { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.kicik { color: var(--gri); }
.koyu .kicik { color: var(--gri-k); }
.not { color: var(--gri); max-width: 46ch; font-size: 1.1rem; }
.koyu .not { color: var(--gri-k); }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────────────────────────────────────── display tipografi */
.dev, .buyuk, .orta, h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; line-height: .92; }
.dev  { font-size: clamp(2.9rem, 7.9vw, 8.2rem); font-variation-settings: 'opsz' 96, 'wdth' 90; letter-spacing: -0.045em; line-height: .9; }
.buyuk{ font-size: clamp(2.2rem, 5.4vw, 5.4rem); font-variation-settings: 'opsz' 96, 'wdth' 92; }
.orta { font-size: clamp(1.7rem, 3.4vw, 3.3rem); font-variation-settings: 'opsz' 48, 'wdth' 96; letter-spacing: -0.03em; line-height: 1; }
.dev em, .buyuk em, .orta em { font-style: normal; font-weight: 300; font-variation-settings: 'opsz' 96, 'wdth' 100; letter-spacing: -0.02em; }
.kelime { display: inline-block; will-change: transform, opacity; }

/* ───────────────────────────────────────────── düğmeler */
.dugme {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em; border-radius: 999px;
  background: var(--murekkep); color: var(--acik);
  font-weight: 500; font-size: .95rem; line-height: 1;
  transition: transform .45s var(--gecis), background .3s;
}
.dugme:hover { transform: translateY(-2px); background: #000; }
.dugme--sade { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.dugme--sade:hover { background: rgba(17,17,20,.06); }
.koyu .dugme { background: var(--acik); color: var(--murekkep); }
.koyu .dugme:hover { background: #fff; }
.koyu .dugme--sade { background: transparent; color: var(--acik); }
.koyu .dugme--sade:hover { background: rgba(236,234,228,.08); }
.dugme--sari { background: var(--sari); color: var(--murekkep); }
.dugme--sari:hover { background: #ffd24a; }
.dugme svg { width: .9em; height: .9em; }

/* ───────────────────────────────────────────── üst çubuk */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--kenar);
  /* Kendi zemini var. Eskiden `mix-blend-mode: difference` vardi: zarifti
     ama altindan metin gecince iki yazi birbirine giriyor, ikisi de
     okunmuyordu (11 Eylul 2026). Zemin ile blend birlikte calismiyor -
     biri gidecekti, okunurluk kazandi. */
  color: var(--murekkep);
  background: rgba(236, 234, 228, .82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(17, 17, 20, .08);
  pointer-events: none;
}
.ust > * { pointer-events: auto; }
.marka { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; font-size: 1.15rem; line-height: 1; display: flex; align-items: baseline; gap: .35em; }
.marka small { font-family: var(--f-mono); font-weight: 400; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ust-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .9rem; }
.ust-nav a { position: relative; opacity: .8; transition: opacity .25s; }
.ust-nav a:hover { opacity: 1; }
.ust-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.25em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--gecis); }
.ust-nav a:hover::after { transform: scaleX(1); }
.ust-nav .hap { border: 1px solid currentColor; border-radius: 999px; padding: .5em 1em; opacity: 1; }
.ust-nav .hap::after { display: none; }

/* ───────────────────────────────────────────── kepenk */
.kepenk {
  position: fixed; inset: 0; z-index: 70; background: var(--koyu); color: var(--acik);
  display: grid; place-items: center;
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(236,234,228,.05) 22px 23px);
  transform: translateY(0);
}
.kepenk-yazi { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; font-size: clamp(2rem, 6vw, 5rem); line-height: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.kepenk-yazi .mono { color: var(--sari); }
html:not(.kepenkli) .kepenk { display: none; }

/* ───────────────────────────────────────────── hero */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: var(--ust-bosluk) 0 clamp(3rem, 8vw, 6rem) var(--kenar);
  overflow: clip;
}
/* Metin kenara yapışmasın: nav hizasından bir adım içeride (kullanıcı, 8 Eylül 2026). Mobilde sıfırlanıyor. */
.hero-metin { position: relative; z-index: 2; max-width: 52rem; padding-left: clamp(1rem, 3vw, 3.2rem); }
.hero .kicik { display: flex; gap: .8em; align-items: center; margin-bottom: 1.6rem; }
.hero .kicik i { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--sari); }
.hero .dev { max-width: 13ch; }
.giris { margin-top: 1.6rem; max-width: 42ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--gri); }
.hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-alt { position: absolute; left: var(--kenar); bottom: 1.6rem; display: flex; gap: 2rem; color: var(--gri); }
.hero-alt span { display: flex; gap: .6em; align-items: center; }

/* Vitrin: camlar. Yatay bir raf gibi sağ kenardan taşıyor; her camın içinde
   sitenin TAM sayfa görüntüsü yavaşça kayıyor — "canlı site" hissi. */
.vitrin {
  position: relative; z-index: 1; height: clamp(30rem, 78vh, 52rem);
  display: flex; align-items: flex-end; gap: clamp(.8rem, 1.6vw, 1.6rem);
  perspective: 1600px; margin-right: -6vw;
}
.cam {
  position: relative; flex: 0 0 auto; display: block;
  transform-style: preserve-3d;
  transition: transform .9s var(--gecis);
  will-change: transform;
}
.cam--masaustu { width: clamp(14rem, 21vw, 21rem); height: 82%; }
.cam--mobil    { width: clamp(7.2rem, 9.6vw, 9.6rem); height: 62%; }
.cam:nth-child(2) { margin-bottom: 8%; }
.cam:nth-child(3) { margin-bottom: 14%; }
.cam:nth-child(4) { margin-bottom: 4%; }
.cam:nth-child(n+5) { display: none; }
.cam-cerceve {
  display: block; height: 100%; overflow: hidden; position: relative;
  background: var(--kagit-2); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 60px -30px rgba(17,17,20,.45), 0 0 0 1px rgba(17,17,20,.08);
}
.cam--mobil .cam-cerceve { border-radius: 22px; box-shadow: 0 0 0 5px var(--murekkep), 0 0 0 6px rgba(17,17,20,.2), 0 30px 60px -30px rgba(17,17,20,.5); }
.cam-cerceve img { position: absolute; top: 0; left: 0; width: 100%; height: auto; animation: kay var(--sure, 26s) ease-in-out infinite alternate; animation-delay: var(--bekle, 0s); }
.cam:hover .cam-cerceve img { animation-play-state: paused; }
@keyframes kay { from { transform: translateY(0); } to { transform: translateY(calc(-100% + var(--cam-yuk, 400px))); } }
.cam-etiket { position: absolute; left: 0; bottom: -1.6rem; color: var(--gri); max-width: 100%; line-height: 1.25; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.cam:hover .cam-etiket { opacity: 1; transform: none; }

/* ───────────────────────────────────────────── tabela şeridi */
.tabela { border-block: 1px solid var(--cizgi); overflow: hidden; padding-block: .9rem; background: var(--kagit); }
.tabela-ic { display: flex; width: max-content; gap: 3rem; animation: aktar 40s linear infinite; }
.tabela:hover .tabela-ic { animation-play-state: paused; }
.tabela-ic a { display: flex; align-items: center; gap: 3rem; white-space: nowrap; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.02em; }
.tabela-ic a i { width: .5em; height: .5em; border-radius: 50%; background: var(--sari); box-shadow: 0 0 0 4px rgba(244,196,48,.25); }
.tabela-ic a small { font-family: var(--f-mono); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); }
@keyframes aktar { to { transform: translateX(-50%); } }

/* ───────────────────────────────────────────── işler (sergi) */
.isler-bas { padding: var(--ust-bosluk) var(--kenar) clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.isler-bas .buyuk { max-width: 12ch; margin-top: 1rem; }
.is { position: relative; }
.koyu { background: var(--koyu); color: var(--acik); }
.koyu .cizgi { border-color: var(--cizgi-k); }

/* geniş: koyu bant, masaüstü büyük, mobil köşede */
/* Sol sutunun alt siniri `auto`, 16rem DEGIL. `minmax(16rem, 2fr)` sutunu
   16rem'de kilitliyordu: icerik daha genisse sutunun DISINA tasiyor ve
   sagdaki gorselin ustune giriyordu (kullanicinin 11 Eylul 2026 karesi:
   kunye satirlari ve ozet sag kenardan kesik). `auto` ile sutun asla
   icerigin min-content genisliginden dar olmuyor. */
.is--genis { padding: clamp(3rem, 7vw, 7rem) var(--kenar); display: grid; grid-template-columns: minmax(auto, 2fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.is--genis .is-meta { position: sticky; top: 6rem; }
.is--genis .is-gorsel { position: relative; display: block; }
.is--genis .ekran--masaustu { display: block; border-radius: 12px; overflow: hidden; background: var(--koyu-2); box-shadow: 0 0 0 1px rgba(236,234,228,.1), 0 60px 80px -50px rgba(0,0,0,.8); aspect-ratio: 16 / 10.5; }
.is--genis .ekran--mobil { position: absolute; right: -4%; bottom: -8%; width: 22%; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 5px var(--murekkep), 0 0 0 6px rgba(236,234,228,.2), 0 40px 60px -30px rgba(0,0,0,.8); aspect-ratio: 9 / 19.5; background: var(--koyu-2); }

/* dar: açık bant, mobil büyük, masaüstü küçük, meta sağda */
.is--dar { padding: clamp(3rem, 7vw, 7rem) var(--kenar); display: grid; grid-template-columns: minmax(0, 5fr) minmax(auto, 2fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; background: var(--kagit); }
.is--dar .is-meta { position: sticky; top: 6rem; order: 2; }
.is--dar .is-gorsel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; align-items: end; }
.is--dar .ekran--mobil { border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 6px var(--murekkep), 0 0 0 7px rgba(17,17,20,.15), 0 40px 60px -30px rgba(17,17,20,.5); aspect-ratio: 9 / 19.5; background: var(--kagit-2); transform: translateY(-6%); }
.is--dar .ekran--masaustu { border-radius: 12px; overflow: hidden; background: var(--kagit-2); box-shadow: 0 0 0 1px rgba(17,17,20,.08), 0 50px 70px -50px rgba(17,17,20,.5); aspect-ratio: 16 / 10.5; }

/* ekran görüntüsü kaydırınca cam içinde kayıyor (JS scrub) */
/* ÇERÇEVE BOYUTU YALNIZ aspect-ratio'DAN GELİR, GÖRSELDEN DEĞİL.
   12 Eylül 2026, iPhone: telefon maketi metnin ve düğmelerin üstüne biniyordu.
   Görsel akıştayken Safari (a) `min-height: auto` ile kutuyu görselin tam
   boyuna uzatıyor — `overflow: hidden` Chrome'daki gibi sıfırlamıyor — ve
   (b) `1fr` sütunu görselin gerçek genişliğine açıyor. Chrome'da ikisi de
   olmadığı için emülasyonda görünmüyordu. Görsel mutlak konumda: kutunun
   genişliğine de yüksekliğine de katkı veremez; kaydırma (translateY) aynı. */
.ekran { display: block; position: relative; min-height: 0; }
.ekran img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; }
.is-gorsel { cursor: pointer; }

.is-no { font-family: var(--f-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .8; letter-spacing: -0.05em; color: var(--sari); display: block; }
.is-meta h3 { margin-top: 1.4rem; font-size: clamp(1.9rem, 3vw, 3rem); }
.is-meta h3 a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--gecis); }
.is-meta h3 a:hover { background-size: 100% 2px; }
.is-soz { margin-top: .6rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; }
.kunye { margin-top: 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; border-top: 1px solid var(--cizgi); padding-top: 1rem; }
.koyu .kunye { border-color: var(--cizgi-k); }
.kunye dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); padding-top: .2em; }
.koyu .kunye dt { color: var(--gri-k); }
/* "ozelatakentbilgefilanaokulu.com" bolunemeyen tek jeton: sol sutuna
   ~210px taban dayatiyordu. Bolunebilir olunca baski kalkiyor. */
.kunye dd { font-size: .95rem; overflow-wrap: anywhere; }
.is-ozet { margin-top: 1.4rem; color: var(--gri); max-width: 38ch; }
.koyu .is-ozet { color: var(--gri-k); }
/* Ödeme ortağı rozeti (projeler.json → satis). Beyaz zemin: ortağın moru
   koyu kartta da okunsun. */
.is-ortak { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .9rem; padding: .55rem .9rem .55rem 1rem; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px rgba(103, 0, 255, .18); text-decoration: none; transition: box-shadow .3s var(--gecis); }
.is-ortak:hover { box-shadow: 0 0 0 2px #6700FF; }
.is-ortak .mono { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #4A00B8; }
.is-ortak img { display: block; width: 5.6rem; height: auto; }
.is-eylem { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }

/* ───────────────────────────────────────────── önce / sonra */
.fark { padding: var(--ust-bosluk) var(--kenar); }
.fark-bas { max-width: 60rem; }
.fark-bas .buyuk { margin-top: 1rem; max-width: 18ch; }
.fark-liste { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.kiyas { position: relative; aspect-ratio: 16 / 9.5; border-radius: 12px; overflow: hidden; background: var(--koyu); box-shadow: 0 0 0 1px rgba(17,17,20,.1); user-select: none; --k: 50%; }
.kiyas-once, .kiyas-sonra { position: absolute; inset: 0; }
/* "Sonra" katmanı çizgiye SOLA DAYALI: sürgüyü çekince yeni sitenin sol
   kenarından (başlık, logo) açılıyor. clip-path ile kesseydik sağ yarısı
   görünürdü — kullanıcı 8 Eylül 2026: "yaptığımız sayfanın sol kısmı çıkmıyor". */
.kiyas-sonra { left: var(--k); right: 0; overflow: hidden; }
.kiyas-sonra img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* Panel genisligi surguye bagli: metin her zaman GORUNEN seritte duruyor.
   Ortalandigi surum (11 Eylul 2026 oncesi) varsayilan %50 konumda sag
   yarisini "sonra" katmaninin altinda birakiyordu. 8rem taban, surgu
   sifira cekilince yazi ezilmesin diye. 19rem denendi: 390px ekranda panel
   gorunen seritten (179px) genis kaldigi icin yazi "sonra" katmaninin altinda
   kaliyordu. */
.olu { container-type: inline-size; height: 100%; width: min(100%, max(var(--k), 8rem)); display: grid; place-content: center; text-align: center; gap: .8rem; padding: 1.6rem; color: var(--gri-k); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(236,234,228,.03) 14px 15px); }
.olu-adres { color: var(--acik); font-size: .8rem; overflow-wrap: anywhere; }
.olu b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 11cqw, 3.6rem); letter-spacing: -0.04em; line-height: .95; color: var(--acik); overflow-wrap: anywhere; }
.olu p { max-width: min(34ch, 100%); font-size: .95rem; }
.kiyas input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; -webkit-appearance: none; }
.kiyas-cizgi { position: absolute; top: 0; bottom: 0; left: var(--k); width: 2px; background: var(--sari); transform: translateX(-1px); z-index: 2; pointer-events: none; }
.kiyas-cizgi::after { content: '◂ ▸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--sari); color: var(--murekkep); display: grid; place-items: center; font-size: .75rem; letter-spacing: .05em; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
/* Etiketler cercevenin USTUNDE: icindeyken alttaki ekran goruntusunun kendi
   yazisini kapatiyorlardi (11 Eylul 2026). */
.kiyas-basliklar { display: flex; justify-content: space-between; margin-bottom: .55rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); }

/* ───────────────────────────────────────────── süreç (yatay ray) */
.surec { background: var(--koyu); color: var(--acik); }
.surec-kilit { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 6rem) 0; }
.surec-bas { padding-inline: var(--kenar); display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.surec-bas .buyuk { margin-top: 1rem; max-width: 14ch; }
.surec-ray { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem); padding: clamp(2.5rem, 5vw, 4rem) var(--kenar) 0; }
/* JS raya bağlayınca tek satır; bağlamazsa (az hareket, JS yok) sarıyor, hiçbir adım gizli kalmıyor. */
.surec-ray.rayli { flex-wrap: nowrap; width: max-content; will-change: transform; gap: clamp(1rem, 2vw, 2rem); }
.surec-ray:not(.rayli) .adim--son { width: 100%; padding-top: 2.5rem; }
.adim { position: relative; width: clamp(20rem, 30vw, 30rem); padding: 2rem 0 0; border-top: 1px solid var(--cizgi-k); }
.adim::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--sari); transition: width 1.2s var(--gecis); }
.adim.gorundu::before { width: 100%; }
.adim-no { font-family: var(--f-display); font-weight: 300; font-size: clamp(3.4rem, 6vw, 6rem); letter-spacing: -0.05em; line-height: .8; color: var(--sari); }
.adim h3 { margin-top: 1.4rem; font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.adim h3 small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gri-k); margin-bottom: .6rem; }
.adim p { margin-top: 1rem; color: var(--gri-k); max-width: 34ch; }
.adim--son { display: flex; flex-direction: column; justify-content: flex-end; border-top-color: var(--sari); }
.adim--son .orta { color: var(--acik); max-width: 12ch; }
.surec-ipucu { padding-inline: var(--kenar); margin-top: 2rem; color: var(--gri-k); display: flex; gap: .6em; align-items: center; }

/* ───────────────────────────────────────────── iş için */
.isicin { padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 8rem); align-items: start; }
.telefon-sabit { position: sticky; top: 6rem; display: flex; justify-content: center; }
.telefon { width: min(100%, 20rem); aspect-ratio: 9 / 19; border-radius: 34px; overflow: hidden; background: var(--kagit-2); box-shadow: 0 0 0 7px var(--murekkep), 0 0 0 8px rgba(17,17,20,.15), 0 60px 80px -40px rgba(17,17,20,.55); position: relative; }
.telefon::before { content: ''; position: absolute; top: 10px; left: 50%; width: 36%; height: 22px; transform: translateX(-50%); background: var(--murekkep); border-radius: 999px; z-index: 2; }
.telefon img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; }  /* bkz. .ekran img */
.isicin-bas .buyuk { margin-top: 1rem; max-width: 14ch; }
.sozler { list-style: none; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--cizgi); }
.sozler li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--cizgi); align-items: start; }
.sozler .mono { color: var(--sari-k); padding-top: .5em; }
.sozler h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.sozler p { margin-top: .5rem; color: var(--gri); max-width: 46ch; }

/* ───────────────────────────────────────────── neden */
.neden { background: var(--koyu); color: var(--acik); padding: var(--ust-bosluk) var(--kenar); }
.neden .dev { max-width: 14ch; }
.neden .dev em { color: var(--gri-k); }
.neden-alt { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; color: var(--gri-k); max-width: 70rem; }
.neden-alt p strong { color: var(--acik); font-weight: 500; display: block; margin-bottom: .3rem; }

/* ───────────────────────────────────────────── konuşalım */
.konus { padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 8rem); align-items: start; }
.konus-bas { position: sticky; top: 6rem; }
.konus-bas .buyuk { margin-top: 1rem; max-width: 12ch; }
.konus-yollar { margin-top: 2rem; display: grid; gap: .6rem; }
.konus-yollar a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--cizgi); font-size: 1.05rem; }
.konus-yollar a:last-child { border-bottom: 1px solid var(--cizgi); }
.konus-yollar a span:last-child { color: var(--gri); transition: transform .4s var(--gecis); }
.konus-yollar a:hover span:last-child { transform: translateX(4px); color: var(--murekkep); }

.basvuru { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.alan { display: flex; flex-direction: column; gap: .45rem; }
.alan--genis { grid-column: 1 / -1; }
.alan-ad { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); }
.alan-ad em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }
.alan input, .alan textarea {
  font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--murekkep);
  padding: .6rem 0; border-radius: 0; outline: 0; transition: border-color .3s;
}
.alan input::placeholder, .alan textarea::placeholder { color: rgba(17,17,20,.35); }
.alan input:focus, .alan textarea:focus { border-bottom-color: var(--sari-k); }
.alan--hata input, .alan--hata textarea { border-bottom-color: #B3261E; }
.alan-not { font-size: .85rem; color: var(--gri); }
.basvuru-eylem { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.basvuru-not { grid-column: 1 / -1; color: var(--gri); }

/* ───────────────────────────────────────────── alt */
.alt { border-top: 1px solid var(--cizgi); padding: 2rem var(--kenar) 2.2rem; display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem 3rem; align-items: center; color: var(--gri); }
.alt .marka { color: var(--murekkep); }
.alt-linkler { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.alt-linkler a:hover { color: var(--murekkep); }

/* ───────────────────────────────────────────── imleç */
.imlec {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--sari);
  transform: translate(-50%, -50%); mix-blend-mode: normal;
  display: grid; place-items: center; overflow: hidden;
  transition: width .35s var(--gecis), height .35s var(--gecis), opacity .3s;
  opacity: 0;
}
.imlec span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.imlec.acik { width: 5.4rem; height: 5.4rem; }
.imlec.acik span { opacity: 1; transition-delay: .12s; }
.imlec.gizli { opacity: 0 !important; }
html.imlecli .imlec { opacity: 1; }
html.imlecli a[data-imlec], html.imlecli .is-gorsel { cursor: none; }

/* ───────────────────────────────────────────── vaka sayfası */
.vaka-hero { padding: var(--ust-bosluk) var(--kenar) clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.vaka-hero .dev { margin-top: 1.2rem; max-width: 12ch; }
.vaka-soz { margin-top: 1.4rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -0.02em; max-width: 24ch; }
.geri { display: inline-flex; align-items: center; gap: .5em; color: var(--gri); }
.geri:hover { color: var(--murekkep); }

.pencere-sahne { padding: 0 var(--kenar); }
.pencere { position: relative; border-radius: 14px; overflow: hidden; background: var(--koyu-2); box-shadow: 0 0 0 1px rgba(17,17,20,.12), 0 80px 100px -60px rgba(17,17,20,.55); }
.pencere-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--koyu); color: var(--gri-k); }
.pencere-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(236,234,228,.22); }
.pencere-bar b { margin-left: auto; margin-right: auto; font-family: var(--f-mono); font-weight: 400; font-size: .72rem; letter-spacing: .06em; color: var(--acik); }
.pencere-ic { height: min(72vh, 46rem); overflow: hidden; position: relative; }
.pencere-ic img { width: 100%; height: auto; will-change: transform; }
.pencere-sahne.sabit { position: sticky; top: 4.5rem; z-index: 1; }
.pencere-bosluk { height: 0; }
.pencere-sahne.sabit + .pencere-bosluk { height: 120vh; }
/* Sticky'nin sinirini bu sarmal koyuyor: pencere sarmal kayarken cakili,
   sarmal bitince birakiliyor. Eskiden kapsayici <main> idi ve pencere
   sayfa sonuna kadar cakili kaliyordu; kunye, hikaye, yaklasim, renk ve
   yazi bolumlerinin hepsi altindan geciyordu (11 Eylul 2026). */
.pencere-alan { position: relative; }

.vaka-kunye { padding: clamp(3rem, 6vw, 5rem) var(--kenar); display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; border-bottom: 1px solid var(--cizgi); }
.kanit { border-top: 1px solid var(--murekkep); padding-top: 1rem; }
.kanit .mono { color: var(--gri); }
.kanit b { display: block; margin-top: .5rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }

.vaka-bolum { padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr); gap: clamp(2rem, 5vw, 6rem); border-bottom: 1px solid var(--cizgi); }
.vaka-bolum > .kicik { position: sticky; top: 6rem; align-self: start; }
.hikaye p { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; max-width: 36em; letter-spacing: -0.01em; }
.hikaye p + p { margin-top: 1.4em; }
.hikaye p:first-child::first-letter { font-family: var(--f-display); font-weight: 700; font-size: 3.2em; float: left; line-height: .8; margin: .06em .12em 0 0; color: var(--sari-k); }
.yaklasim { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
.yaklasim h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.yaklasim p { margin-top: .6rem; color: var(--gri); }

/* Ödeme ortağı bandı (projeler.json → satis). Sayfanın tek renkli bölümü:
   ortağın kendi moru, logosu sayfada tek başına durabilsin diye açık zemin. */
.satis { --mor: #6700FF; --mor-k: #4A00B8; --mor-z: #F3EEFF; background: var(--mor-z); padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 7rem); border-bottom: 1px solid var(--cizgi); }
.satis .kicik { color: var(--mor-k); }
.satis-logo { display: block; width: clamp(9rem, 16vw, 13rem); height: auto; margin-top: 1.6rem; }
.satis-bas .buyuk { margin-top: 1.4rem; max-width: 14ch; }
.satis-metin { margin-top: 1.4rem; max-width: 32em; color: var(--gri); font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.satis-dukkan { display: inline-block; text-transform: none; letter-spacing: 0; margin-top: 1.6rem; color: var(--mor-k); text-decoration: none; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.satis-dukkan:hover { color: var(--mor); }
.satis-akis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-self: start; }
.satis-akis li { background: #fff; border-radius: 14px; padding: 1.4rem 1.4rem 1.6rem; box-shadow: 0 0 0 1px rgba(103, 0, 255, .1); }
.satis-akis .mono { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mor); color: #fff; font-size: .8rem; }
.satis-akis h3 { margin-top: 1.1rem; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.05; }
.satis-akis p { margin-top: .5rem; color: var(--gri); font-size: .98rem; }
.satis-raf { grid-column: 1 / -1; border-top: 1px solid rgba(103, 0, 255, .25); padding-top: 1.2rem; }
.satis-raf > .mono { color: var(--mor-k); }
.satis-raf ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .8rem 2rem; }
.satis-raf li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed rgba(103, 0, 255, .22); }
.satis-raf li span { min-width: 0; }
.satis-raf li b { flex: none; font-family: var(--f-display); font-weight: 600; color: var(--mor-k); }
@media (max-width: 1000px) {
  .satis { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .satis-akis { grid-template-columns: 1fr; }
}

.renkler { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
/* Masaüstünde ÜÇ sütun: paletler altı renk taşıyor, auto-fit beşe bölüp
   altıncıyı yalnız bırakıyordu — yanında dört boş sütun kalıyordu
   (CLAUDE.md: hiçbir blokta boş sütun kalmaz). Üç sütun = iki tam sıra. */
@media (min-width: 1001px) { .renkler { grid-template-columns: repeat(3, 1fr); } }
.renk { aspect-ratio: 1 / 1.15; border-radius: 10px; background: var(--r); display: flex; flex-direction: column; justify-content: flex-end; padding: .9rem; box-shadow: inset 0 0 0 1px rgba(17,17,20,.08); color: var(--m, var(--murekkep)); }
.renk span { font-weight: 500; font-size: .95rem; }
.renk code { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; opacity: .75; }
.fontlar { display: grid; gap: 1.6rem; }
.font { border-top: 1px solid var(--cizgi); padding-top: 1rem; }
.font .mono { color: var(--gri); }
.font-ornek { margin-top: .6rem; font-size: clamp(1.8rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }

.ekranlar { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.ekranlar .telefon { width: min(100%, 17rem); margin-inline: auto; }
.ekranlar figcaption { margin-top: 1rem; color: var(--gri); text-align: center; }
.tam-ekran { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,17,20,.1); background: var(--kagit-2); }

.canli { padding: var(--ust-bosluk) var(--kenar); background: var(--koyu); color: var(--acik); text-align: center; }
.canli .dev { margin-inline: auto; max-width: 14ch; }
.canli-eylem { margin-top: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.canli-cerceve { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 80rem; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(236,234,228,.12), 0 80px 100px -60px rgba(0,0,0,.8); background: var(--koyu-2); }
.canli-cerceve iframe { display: block; width: 100%; height: min(78vh, 52rem); border: 0; background: var(--kagit); }
.vaka-sonraki { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(3rem, 6vw, 5rem) var(--kenar); border-top: 1px solid var(--cizgi); }
.vaka-sonraki .orta { margin-top: .5rem; }
.vaka-sonraki .ok { font-family: var(--f-display); font-size: 3rem; line-height: 1; transition: transform .4s var(--gecis); }
.vaka-sonraki:hover .ok { transform: translateX(8px); }

/* ───────────────────────────────────────────── hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  section[id], main[id] { scroll-margin-top: 5.2rem; }
  .cam-cerceve img, .tabela-ic { animation: none; }
  .adim::before { width: 100%; }
  .cam { transition: none; }
}

/* ───────────────────────────────────────────── mobil: ayrı kurgu */
@media (max-width: 1000px) {
  .isler-bas, .isicin, .konus { grid-template-columns: 1fr; }
  .is--genis, .is--dar { grid-template-columns: 1fr; gap: 2rem; }
  .is--dar .is-meta { order: 0; }
  .is--genis .is-meta, .is--dar .is-meta, .konus-bas, .telefon-sabit { position: static; }
  .is--dar .is-gorsel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 1rem; }
  /* Tek sütunda maket 470px boyunda; -%6 = 28px, üstteki düğmelere 2rem boşluktan 4px kalıyordu. */
  .is--dar .ekran--mobil { transform: none; }
  .vaka-bolum { grid-template-columns: 1fr; gap: 1.5rem; }
  .vaka-bolum > .kicik { position: static; }
  .yaklasim, .ekranlar { grid-template-columns: 1fr; }
  .alt { grid-template-columns: 1fr; }

  /* 10 Eylül 2026: hero tek sütuna 1000px'te düşüyor, 760px'te değil.
     iOS Safari "Masaüstü Web Sitesi İste" sayfayı 980px'te render ediyor;
     eski eşikte hero iki sütun kalıyor ve metin sağdaki cihaz şeridinin
     altına giriyordu (kullanıcı telefondan ekran görüntüsü gönderdi). */
  /* Hero: metin üstte, vitrin kaydırmalı raf */
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 6.5rem 0 2.5rem; gap: 2.5rem; }
  .hero-metin { padding-right: var(--kenar); padding-left: var(--kenar); }
  .hero .dev { font-size: clamp(2.6rem, 12.5vw, 4rem); max-width: 12ch; }
  .hero-alt { display: none; }
  .vitrin {
    height: 22rem; margin-right: 0; padding-right: var(--kenar); gap: .9rem; align-items: flex-end;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; perspective: none;
    -webkit-overflow-scrolling: touch;
  }
  .vitrin::-webkit-scrollbar { display: none; }
  .cam { scroll-snap-align: start; transform: none !important; margin-bottom: 0 !important; }
  .cam--masaustu { width: 17rem; height: 85%; }
  .cam--mobil { width: 8.2rem; height: 80%; }
  .cam:nth-child(n+5) { display: block; }
  .cam-etiket { opacity: 1; transform: none; bottom: -2.6rem; font-size: .64rem; }
  .vitrin { padding-bottom: 3.2rem; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .ust { padding: .9rem var(--kenar); }
  .ust-nav { gap: .9rem; font-size: .85rem; }
  .ust-nav a:not(.hap) { display: none; }


  .tabela-ic a { gap: 1.6rem; }
  .tabela-ic { gap: 1.6rem; }

  .isler-bas { padding-top: 4.5rem; }
  .is--genis, .is--dar { padding: 3rem var(--kenar); }
  .is-no { font-size: 3rem; }
  .is-eylem .dugme { padding: .8em 1.2em; font-size: .9rem; }

  .fark { padding-block: 4.5rem; }
  .kiyas { aspect-ratio: 4 / 5; }
  .olu { padding: 1.1rem; font-size: .82rem; }

  /* Süreç: mobilde dikey liste, ray yok */
  .surec-kilit { min-height: auto; overflow: visible; padding: 4.5rem 0; }
  .surec-bas { flex-direction: column; align-items: flex-start; }
  .surec-ray { width: auto; flex-direction: column; gap: 2rem; transform: none !important; padding-top: 2.5rem; }
  .adim { width: auto; }
  .adim--son { padding-top: 2rem; }
  .surec-ipucu { display: none; }

  .isicin { padding-block: 4.5rem; }
  .telefon-sabit { order: 2; margin-top: 2rem; }
  .telefon { width: min(100%, 15rem); }
  .sozler li { grid-template-columns: 2.4rem 1fr; }

  .neden { padding-block: 4.5rem; }
  .neden .dev { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .konus { padding-block: 4.5rem; }
  .basvuru { grid-template-columns: 1fr; }
  .alt { padding-block: 1.6rem; }

  .vaka-hero { grid-template-columns: 1fr; padding-top: 6rem; }
  .vaka-hero .dev { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .pencere-ic { height: 60vh; }
  .pencere-sahne.sabit + .pencere-bosluk { height: 60vh; }
  .canli-cerceve { display: none; }
  .vaka-sonraki { flex-direction: column; align-items: flex-start; }
}

/* Dokunmatik / hover yok: imleç ve eğim kapalı. */
@media (hover: none) {
  .imlec { display: none; }
  .cam-etiket { opacity: 1; transform: none; }
}

/* Yayin tarihi: "hala eski gorunuyor" sikayetinde hangi surume bakildigi
   tek bakista anlasilsin diye (11 Eylul 2026). */
.alt-surum { opacity: .6; }

/* ==========================================================================
   İÇERİK (ARAMA) SAYFALARI — sayfa.html + ana sayfadaki sayfa listesi.
   Ayrı bir görsel dil DEĞİL: vaka sayfasının ritmini (sticky etiket + geniş
   metin sütunu) kullanıyor ki site tek elden çıkmış görünsün. Alt sınırı
   `auto`: `minmax(16rem, …)` yazılınca uzun başlık sütunun dışına taşıyor
   (bkz. kök CLAUDE.md → sütun taşması).
   ========================================================================== */

.kirinti { padding: 6.5rem var(--kenar) 0; color: var(--gri); display: flex; gap: .6em; align-items: center; }
.kirinti a:hover { color: var(--murekkep); }

.icerik-hero { padding: clamp(2rem, 4vw, 3rem) var(--kenar) clamp(2.5rem, 6vw, 5rem); }
.icerik-hero .dev { max-width: 15ch; }
.icerik-hero .giris { max-width: 52ch; }
.icerik-hero .hero-cta { margin-top: 2rem; }

/* Kanıt şeridi: iddia değil canlı iş. Kare `aspect-ratio`lı çerçevede AKIŞTA
   durmuyor (Safari kutuyu görselin boyuna uzatıyor), o yüzden mutlak. */
.icerik-kanit { padding: 0 var(--kenar) clamp(2.5rem, 6vw, 4.5rem); }
.kanit-bas { border-top: 1px solid var(--cizgi); padding-top: 1rem; }
.kanit-kartlar { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
/* Tek kanıtlı sayfada (bir sektör, bir müşteri) kart bütün satırı kaplamasın:
   1400px genişliğinde tek ekran görüntüsü sayfayı ezip kanıt olmaktan
   çıkıyor. Üç kart yan yanayken zaten bu sınırın altında kalıyorlar. */
.kanit-kart { display: grid; gap: .5rem; max-width: 34rem; }
.kanit-ekran { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--kagit-2); box-shadow: 0 0 0 1px rgba(17,17,20,.08), 0 40px 60px -45px rgba(17,17,20,.6); }
/* Görsel AKIŞTA durmuyor: Safari `aspect-ratio`lı kutuyu görselin boyuna
   uzatıyor, Chrome'da görünmüyor (kök CLAUDE.md, ALTI TUR kaçtı). */
.kanit-ekran img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: transform 1.2s var(--gecis); }
.kanit-kart:hover .kanit-ekran img { transform: scale(1.03); }
.kanit-ad { margin-top: .6rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.kanit-meta, .kanit-not { color: var(--gri); }
.kanit-not { color: var(--sari-k); }

.icerik-metin { margin-top: 1.2rem; }
.icerik-metin p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 62ch; color: var(--gri); }
.icerik-metin p + p { margin-top: 1.1em; }
.icerik .vaka-bolum:last-of-type { border-bottom: 0; }

/* Telefon maketi olmayan madde listesi: ilk sütun yalnız başlık taşıyor. */
.isicin--yalin { grid-template-columns: minmax(auto, 1fr) minmax(0, 1.6fr); }
.isicin--yalin .isicin-bas { position: sticky; top: 6rem; align-self: start; }

.sss { padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(auto, 1fr) minmax(0, 2.2fr); gap: clamp(2rem, 5vw, 6rem); border-top: 1px solid var(--cizgi); }
.sss-bas { position: sticky; top: 6rem; align-self: start; }
.sss-bas .buyuk { margin-top: 1rem; max-width: 10ch; }
.sss-liste { display: grid; }
/* Cevap açık duruyor, akordeon yok: kapalı metin hem aramada hem ekran
   okuyucuda zayıf, hem de burada saklanacak bir şey yok. */
.soru { border-top: 1px solid var(--cizgi); padding: 1.6rem 0; }
.soru:first-child { border-top: 0; padding-top: 0; }
.soru h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.soru p { margin-top: .7rem; color: var(--gri); max-width: 62ch; line-height: 1.55; }

.bagli { padding: clamp(2.5rem, 5vw, 4rem) var(--kenar); border-top: 1px solid var(--cizgi); }
.bagli ul { list-style: none; margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .4rem 2rem; }
.bagli a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--cizgi); font-size: 1.02rem; overflow-wrap: anywhere; }
.bagli a span:last-child { color: var(--gri); transition: transform .4s var(--gecis); }
.bagli a:hover span:last-child { transform: translateX(4px); color: var(--murekkep); }

/* Ana sayfadaki sayfa listesi. */
.sayfalar { padding: var(--ust-bosluk) var(--kenar); display: grid; grid-template-columns: minmax(auto, 1fr) minmax(0, 1.8fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; border-top: 1px solid var(--cizgi); }
.sayfalar-bas { position: sticky; top: 6rem; }
.sayfalar-bas .orta { margin-top: 1rem; max-width: 16ch; }
.sayfalar ul { list-style: none; }
.sayfalar li a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--cizgi); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.9rem); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.sayfalar li:last-child a { border-bottom: 1px solid var(--cizgi); }
.sayfalar li a .ok { font-family: var(--f-govde); font-size: 1rem; color: var(--gri); transition: transform .4s var(--gecis); }
.sayfalar li a:hover .ok { transform: translateX(6px); color: var(--murekkep); }

/* Alt bilgide ikinci satır: `.alt` 1fr auto auto, dördüncü çocuk kendi satırı. */
.alt-linkler--sayfa { grid-column: 1 / -1; }
.alt-linkler--sayfa a { color: var(--gri); }

@media (max-width: 1000px) {
  .sss, .sayfalar, .isicin--yalin { grid-template-columns: 1fr; gap: 1.5rem; }
  .sss-bas, .sayfalar-bas, .isicin--yalin .isicin-bas { position: static; }
  .kirinti { padding-top: 5.5rem; }
}

@media (max-width: 760px) {
  .icerik-hero .dev { font-size: clamp(2.4rem, 11vw, 3.6rem); max-width: 14ch; }
  .sss, .sayfalar, .bagli { padding-block: 3.5rem; }
  .icerik-kanit { padding-bottom: 3rem; }
}

/* Vaka sayfasindan sektor sayfasina bag. */
.vaka-sektor { margin-top: 1.2rem; }
.vaka-sektor a { color: var(--murekkep); border-bottom: 1px solid var(--cizgi); padding-bottom: .15em; }
.vaka-sektor a:hover { border-bottom-color: currentColor; }

/* ---- sabit katman: menü ve alttaki Randevu/WhatsApp düğmesi kaymaz (29 Eylül 2026).
   Tam sayfa görüntüde bu öğeler YOK (tools/sabit-katman.mjs); katman kaydırılan
   görüntünün üstünde durur. Üst yarısı çerçevenin üstüne, alt yarısı altına yaslı:
   çerçeve oranı görünüm alanıyla birebir olmasa da düğme ekranın dibinde kalır. */
.ekran .sabit, .telefon .sabit, .pencere-ic .sabit { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ekran .sabit img, .telefon .sabit img, .pencere-ic .sabit img { position: absolute; left: 0; top: auto; width: 100%; height: auto; will-change: auto; transform: none; }
.sabit img:first-child { top: 0; clip-path: inset(0 0 50% 0); }
.sabit img:last-child { bottom: 0; clip-path: inset(50% 0 0 0); }