/* ===========================================================================
   Ercüment Tan Çelik — kişisel site
   Fikir: LOŞ ODA. Çıpa: diminished (müzikte eksilmiş akor / ingilizcede kısılmış).

   TASARIM DİSİPLİNİ (darusim.com'dan öğrenildi, rengi değil YÖNTEMİ alındı):
     · TEK zemin rengi + TEK ön plan rengi. Başka renk yok.
     · Geri kalan her ton = aynı ön plan renginin ALFA'sı (%5 / %45 / %52 / %68 / %100).
       Alfalar keyfi değil, kontrast ölçülerek seçildi — aşağıdaki "alfa merdiveni".
     · Gradyan yok, ızgara yok, buzlu cam yok, ışık şovu yok.
       "Loş oda" loş olacak. Süsle değil, disiplinle.
     · Tek vurgu rengi, o da sadece iki yerde.

   RENKLER KARAMEL'DEN (bahce.html):
     zemin  -> kulübe ahşabının gölgesi (#452c1a / #3a2a1a ailesinin koyusu)
     ön plan-> kulübe penceresinin kremi (#f6e2bf)
     vurgu  -> Karamelcik'in gözündeki amber (#f2c14e)
   =========================================================================== */

:root{
  --zemin:  #211c16;         /* oda: sıcak, koyu, siyah değil */
  --on:     246, 226, 191;   /* #f6e2bf — TEK ön plan rengi, alfayla çoğaltılır */
  --vurgu:  242, 193, 78;    /* #f2c14e — Karamelcik'in gözü. Sadece 2 yerde. */

  /* Serif: klasik gitar sessiz, yakın, aceleye gelmez — yazı da öyle dursun. */
  --f-yazi: "Iowan Old Style", Constantia, Cambria, Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, Consolas, monospace;
}

*{ box-sizing: border-box; }

/* Metin seçimi ENGELLENMEDİ (e-posta kopyalanabilsin — sitenin asıl işi bu).
   Sadece tarayıcının varsayılan MAVİ seçim rengini sitenin amber'ine boyadık:
   "kötü mavi" -> kasıtlı, sıcak vurgu. Firefox ayrı prefix ister (::-moz-selection);
   tek kuralda birleştirilemez, biri geçersizse ikisi de düşer -> ayrı yazıldı. */
::selection{ background: rgba(var(--vurgu), .85); color: var(--zemin); }
::-moz-selection{ background: rgba(242,193,78,.85); color: #211c16; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  background: var(--zemin);          /* DÜZ. Gradyan yok. */
  /* ALFA MERDİVENİ — hepsi ölçülerek seçildi (zemin #211c16 üstünde):
       %100 -> 12.9:1   başlık, vurgulu cümle
       %68  ->  6.9:1   gövde
       %52  ->  4.5:1   loş cümle       <- AA eşiği tam burada, altına inme
       %45  ->  3.9:1   küçük etiket (isaret) — büyük/kalın değil ama minik ve seyrek
     "Loş" demek "okunmaz" demek değil. */
  color: rgba(var(--on), .68);
  font-family: var(--f-yazi);
  font-size: 19px;
  line-height: 1.72;
}

/* Sayfa geniş. Ama YAZI genişlemiyor: uzun satır okumayı zorlaştırır
   (ideal ~70 karakter). Kazanılan boşluk bahçeye ve görsele gidiyor. */
.sayfa{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 34px);
}

/* ===========================================================================
   TEPE — solda ad + dönen rol, sağda Karamel linki
   =========================================================================== */
/* Kimlik bloğunun altına, hover'da ORTADAN iki yana açılan çizgi.
   Kaynak: text-effects.colorion.co "fx-18" (scaleX + transform-origin:center).
   Sitene çevrildi: neon sarı -> amber, JetBrains Mono -> yok (kendi fontun kaldı),
   <button> -> düz <div> (tıklanmıyor). @media(hover:hover) -> dokunmatikte takılmasın. */
.kimlik{
  position: relative;
  display: inline-block;         /* çizgi tam metin genişliğinde dursun */
  padding-bottom: 8px;
}
.kimlik::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgb(var(--on));       /* isimle aynı krem — amber "sadece 2 yerde" kuralı korunur */
  transform: scaleX(0);
  transform-origin: center;      /* ortadan başlar */
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover){
  .kimlik:hover::after{ transform: scaleX(1); }   /* iki yana açılır */
}
@media (prefers-reduced-motion: reduce){
  .kimlik::after{ transition: none; }
}

.tepe{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(24px, 3.5vh, 34px);
}

.ad-kucuk{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: rgb(var(--on));
  letter-spacing: -.01em;
}

/* >>> okları — bahçe altındaki nota satırının başında. Mono, küçük, krem;
   nota zaten mono olduğu için terminal-log satırı gibi duruyor. Sırayla nabız. */
.chev{ display: inline-flex; gap: 2px; margin-right: 7px; vertical-align: 1px; }
.chev i{
  width: 4.5px; height: 4.5px;
  border-top: 1.5px solid rgba(var(--on), .55);
  border-right: 1.5px solid rgba(var(--on), .55);
  transform: rotate(45deg);      /* kutunun sağ-üst köşesi -> sağa bakan ok > */
  animation: chevNabiz 1.5s ease-in-out infinite;
}
.chev i:nth-child(2){ animation-delay: .18s; }
.chev i:nth-child(3){ animation-delay: .36s; }
@keyframes chevNabiz{ 0%,100%{ opacity:.12 } 50%{ opacity:.85 } }
@media (prefers-reduced-motion: reduce){
  .chev i{ animation: none; opacity: .45; }
}

/* Dönen rol: "gitar çalar" -> "müzik öğretir" -> "kodcu"
   FİİL, sıfattan canlıdır: "gitarist" bir etiket, "gitar çalar" bir eylem. */
.rol{
  margin: 1px 0 0;
  height: 1.5em;
  font-family: var(--f-mono);
  font-size: 13px;
  color: rgba(var(--on), .5);
}
.rol span{
  display: inline-block;
  transition: opacity .4s ease, transform .4s ease;
}
.rol span.gidiyor{
  opacity: 0;
  transform: translateY(-5px);
}

/* ===========================================================================
   DİL ANAHTARI (TR ⇄ EN) — tepe'nin sağ üstünde.
   Kaynak: kullanıcının bulduğu "sw-6" switch'i. Neon paleti (#F4FF2B) ATILDI,
   sitenin tek-renk-alfa disiplinine çevrildi: krem alfalar, amber sadece odakta.
   <input type=checkbox> DEĞİL -> <a> link: JS'siz de çalışsın, her dilin kendi
   URL'si olsun, arama motoru iki sayfayı da görsün. "Durum" = hangi sayfadaysan o:
   .dil-switch.tr (thumb solda, "TR", -> /en)  ·  .dil-switch.en (thumb sağda, "EN", -> /)
   =========================================================================== */
.dil-switch{
  position: relative;
  display: inline-flex;
  flex: none;
  margin-top: 2px;                 /* ad satırıyla göz hizası */
  text-decoration: none;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
}
.dil-switch .track{
  position: relative;
  width: 62px; height: 28px;
  border-radius: 9999px;
  background: rgba(var(--on), .07);
  border: 1px solid rgba(var(--on), .1);
  transition: background .3s ease, border-color .3s ease;
}
.dil-switch:hover .track{
  background: rgba(var(--on), .11);
  border-color: rgba(var(--on), .18);
}
.dil-switch .thumb{
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(var(--on), .6);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.dil-switch:hover .thumb{ background: rgb(var(--on)); }
/* Etiket = mevcut dil. Mono + minik, .rol ve haplarla aynı dil. */
.dil-switch .track::after{
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: rgba(var(--on), .55);
}
.dil-switch.tr .track::after{ content: "TR"; right: 9px; }
.dil-switch.tr .thumb{ transform: translateX(0); }
.dil-switch.en .track::after{ content: "EN"; left: 9px; }
.dil-switch.en .thumb{ transform: translateX(34px); }
.dil-switch:focus-visible{
  outline: 2px solid rgba(var(--vurgu), .8);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  .dil-switch .track, .dil-switch .thumb{ transition: none; }
}

.tepe-bag{
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: rgba(var(--on), .5);
  text-decoration: none;
  padding: 4px 0;
  transition: color .25s ease;
  white-space: nowrap;
}
.tepe-bag:hover{ color: rgb(var(--on)); }
.tepe-bag .ok{ opacity: .6; margin-left: 5px; }

/* ===========================================================================
   GİRİŞ — solda yazı, sağda görsel. İLETİŞİM YAZININ HEMEN ALTINDA.
   Sebebi: sitenin tek işi "yeni tanıştığım biri bana ulaşsın". O işi
   sayfanın dibine gömmek, tek görevi en zor yere koymaktı.
   =========================================================================== */
/* Tepe + giris birlikte TAM EKRAN. Ziyaretci hicbir sey kaydirmadan
   "bu kim" ve "nasil ulasirim" sorularini cevaplasin; gerisi asagida.
   svh = small viewport height -> telefonda adres cubugu kayarken zipla-ma olmaz. */
.kahraman{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.giris{
  flex: 1;
  display: grid;
  /* Sütunlar ORANLA paylaşsın. Önceden "minmax(0,600px) 1fr" idi: yazıya koşulsuz
     600px veriyordu, dar ekranda görsele kırıntı kalıyordu (ölçüldü: 600 + 212).
     Yazının uzamasını sütunla değil, aşağıdaki max-width ile freniyoruz. */
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;    /* iki sütun birbirine göre ortalansın */
  align-content: center;  /* blok, kalan boşlukta dikeyde ortalansın */
  padding: clamp(26px, 4vh, 52px) 0 clamp(22px, 4vh, 44px);
}
/* Yazının freni burada: satır ~70 karakteri geçmesin, okumak zorlaşır. */
.giris-yazi{ max-width: 660px; }

@media (max-width: 820px){
  .giris{ grid-template-columns: 1fr; }
  .kahraman{ min-height: auto; }   /* telefonda zorlamayalim, icerik ne kadarsa o */
}

.basli{
  margin: 0 0 20px;
  font-size: clamp(28px, 4vw, 39px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: rgb(var(--on));            /* %100 — sayfadaki en parlak şey */
}

p{ margin: 0 0 1.1em; }

.los{ color: rgba(var(--on), .52); }   /* ışıktan uzak cümle */

.vurgulu{ color: rgb(var(--on)); }

/* Odanın fotoğrafı. Kaynak 2732x1536 / 4.9 MB idi -> 1120x630 WebP / 42 KB.
   Yuva ~560px geniş; retina için 2 katı yeter, fazlası boşuna bayt. */
.gorsel-alan{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--on), .07);
}
.gorsel-alan img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Fotoğraf mor-mavi ışıklı, sayfa sıcak-koyu. Hafifçe yediriyoruz.
     Ağır filtre resmi öldürür; amaç bastırmak değil, odaya oturtmak. */
  filter: saturate(.86) brightness(.94) contrast(1.02);
}
/* Odanın kendi rengi, ince bir tül gibi. Üstten az, alttan biraz fazla —
   sayfanın karanlığı fotoğrafın altından içeri sızsın. */
.gorsel-alan::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(33,28,22,.08), rgba(33,28,22,.28));
}

/* ===========================================================================
   İLETİŞİM HAPLARI
   =========================================================================== */
.baglantilar{
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.baglanti-sar{ position: relative; }

.baglanti{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 0;
  border-radius: 24px;
  background: rgba(var(--on), .05);   /* tek renk, %5 */
  color: rgba(var(--on), .68);
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.baglanti:hover{
  background: rgba(var(--on), .11);
  color: rgb(var(--on));
}
.baglanti:focus-visible{
  outline: 2px solid rgba(var(--vurgu), .8);
  outline-offset: 2px;
}
.baglanti svg{ width: 15px; height: 15px; display: block; flex: none; }

/* "kopyalandı" balonu — düğmenin SOL kenarına hizalı (ortalasaydık dar
   telefonda ekranın soluna taşıp yatay kaydırma yaratırdı). */
.kopya-balon{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  /* Uzun değer (e-posta adresi) dar telefonda balonu viewport DIŞINA taşırmasın
     (320px'te ölçüldü: nowrap iken 29px yatay kaydırma). Balon içeriği kadar
     geniş olur (max-content -> normalde tek satır), ama viewport'u aşamaz
     (max-width) -> ancak dar telefonda alt satıra sarar. width olmadan mutlak
     konumlu balon dar hap kutusuna büzülüp adresi harf harf bölüyordu.
     Kısa değer (Discord "diminishedd") zaten sığar, tek satır kalır. */
  width: max-content;
  max-width: calc(100vw - 44px);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-family: var(--f-mono);
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: 7px;
  background: rgba(var(--on), .1);
  color: rgb(var(--on));
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 5;
}
.kopya-balon.gorunur{ opacity: 1; transform: translateY(0); }

/* ===========================================================================
   BÖLÜMLER — aralarındaki ES çizgiden iyi ayırır
   =========================================================================== */
.es{ height: clamp(70px, 13vh, 118px); }


.dar{ max-width: 620px; }

/* Adın kendisi: sitenin çıpası. VURGU BURADA (iki yerden biri). */
.ad-akor{
  font-family: var(--f-mono);
  font-size: .9em;
  color: rgb(var(--vurgu));
}

/* ===========================================================================
   KART — Karamel. Çerçeve var ama parlamıyor: sadece %5 zemin + %8 kenar.
   =========================================================================== */
.kart{
  display: block;
  max-width: 620px;
  text-decoration: none;
  color: inherit;
  padding: 24px 26px;
  border-radius: 12px;
  background: rgba(var(--on), .04);
  border: 1px solid rgba(var(--on), .08);
  transition: background .3s ease, border-color .3s ease;
}
.kart:hover{
  background: rgba(var(--on), .07);
  border-color: rgba(var(--on), .16);
}
.kart-ad{
  margin: 0 0 6px;
  font-size: 19px;
  color: rgb(var(--on));
}
/* VURGU'nun ikinci ve son yeri */
.kart-ad .ok{
  color: rgb(var(--vurgu));
  font-family: var(--f-mono);
  font-size: .68em;
  margin-left: 7px;
}
.kart p{ margin: 0; font-size: 15.5px; line-height: 1.65; }

/* ===========================================================================
   DİP
   =========================================================================== */
.altlik{
  padding: clamp(70px, 12vh, 110px) 0 clamp(60px, 10vh, 90px);
}
.altlik .baglantilar{ margin-top: 16px; }

/* ===========================================================================
   Kaydırınca beliren yazı — sınıfı site.js ekler (JS yoksa her şey görünür).
   =========================================================================== */
.beliren{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.22,.61,.24,1),
              transform 1s cubic-bezier(.22,.61,.24,1);
}

/* Daktilo imleci: yazarken yanıp söner, bitince kaybolur. */
.imlec{
  display: inline-block;
  width: .06em;
  height: .86em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: rgb(var(--vurgu));
  animation: imlecYanip .62s steps(1) infinite;
}
@keyframes imlecYanip{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.beliren.gorundu{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .beliren{ opacity: 1; transform: none; transition: none; }
  .rol span{ transition: none; }
  .imlec{ display: none; }
}

/* ===========================================================================
   İŞ — Karamel. Başlık + açıklama ÜSTTE, bahçe altta paspartulu çerçevede.
   (Kart bahçenin üstündeydi; Karamelcik'i kapatıyordu ve okuması zordu.)
   =========================================================================== */
.is-ad{
  margin: 0 0 10px;
  font-size: 21px;
  color: rgb(var(--on));
}
.is-aciklama{
  max-width: 660px;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
}

/* Paspartu: bahçe doğrudan sayfaya yapışmasın, çerçeve içinde dursun.
   Zemin odanın rengi + %4 -> çerçeve fark edilir ama bağırmaz. */
.is-aciklama.vurgulu{ margin-bottom: 26px; }

.is-cerceve{
  border-radius: 16px;
  background: rgba(var(--on), .04);
  padding: clamp(14px, 2.6vw, 32px);
}
.is-sahne{
  position: relative;
  /* Masaüstü penceresinin oranı (1421x656 ≈ 2.17). 16/9 (1.78) fazla yüksekti:
     boşuna gökyüzü, buna karşılık dar dünya. */
  aspect-ratio: 2.17;
  min-height: 240px;
  border-radius: 9px;
  overflow: hidden;
}
.is-sahne iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* MOBİL kart: normalde gizli, sadece dar ekranda görünür (aşağıdaki media query). */
.is-mobil{ display: none; }

.is-not{
  margin: 12px 2px 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(var(--on), .45);
}

/* NOT: Telefonda ayrı (daha uzun) oran VERMİYORUZ. Bahçenin ufuk çizgisi
   "alttan sabit 94 birim" olduğu için dünya uzayınca gökyüzü şişiyor; bahçe
   yalnızca ~2.2 oranında dengeli. O yüzden her ekranda aynı oran -> aynı kompozisyon.
   Dar telefonda bahçe kısalır ama orantısı bozulmaz. */


/* ===========================================================================
   MOBİL (≤640px): canlı bahçe yerine dokunulabilir önizleme kartı.
   Sebep: bahçe geniş ekran için tasarlı + iframe iOS Safari'de sığmıyor +
   Karamelcik'i minik dokunmatik çerçevede tutmak zor. Tam ekran daha iyi.
   =========================================================================== */
@media (max-width: 640px){
  .is-cerceve{ display: none; }          /* canlı iframe gizli -> lazy, hiç yüklenmez */
  .is-mobil{
    display: block;
    position: relative;
    aspect-ratio: 1000 / 461;      /* iframe yerine geçince yükseklik korunsun */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--on), .1);
    text-decoration: none;
    cursor: pointer;
  }
  .is-mobil img{ position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; display: block; }
  /* dokununca yerine geçecek canlı bahçe (site.js ekler) */
  .is-mobil-frame{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  /* önizleme üstünde karartma + ortada dönen telefon + "Rotate Your Phone" */
  .is-mobil-ort{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(33, 28, 22, .42);
  }
  .is-mobil-ic{
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: rgb(var(--on));
    background: rgba(33, 28, 22, .78);
    border: 1px solid rgba(var(--on), .28);
    border-radius: 14px;
    padding: 16px 22px;
  }
  .rot-ikon{ width: 34px; height: 34px; animation: rotTel 2.6s ease-in-out infinite; }
  .rot-yazi{ font-family: var(--f-mono); font-size: 13px; letter-spacing: .04em; }
  /* telefon portreden yatay'a dönüp geri gelir — "yana çevir" demenin görsel hâli */
  @keyframes rotTel{
    0%, 18%   { transform: rotate(0deg); }
    46%, 64%  { transform: rotate(-90deg); }
    92%, 100% { transform: rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce){ .rot-ikon{ animation: none; } }
}