/* ============================================================================
   CLAIO — Tasarım Sistemi
   ----------------------------------------------------------------------------
   Bu dosya sitenin tüm görünümünü tutar. Yapısı:
     1. Değişkenler (renk, tipografi, boşluk)  → burayı değiştirirsen her yer değişir
     2. Temel sıfırlama ve gövde
     3. Yardımcı sınıflar (kabuk, başlık, buton, rozet, yüzey)
     4. Bileşenler (menü, açılış, şerit, bento, süreç, ekip, SSS, iletişim, dip)
     5. Animasyonlar
     6. Duyarlılık (tablet / telefon)
   ============================================================================ */

/* ============================================================
   1. DEĞİŞKENLER
   ============================================================ */
:root{
  /* — Renk: koyu tema (varsayılan) — */
  --murekkep:        #0C100E;   /* zemin */
  --murekkep-2:      #111715;   /* kart zemini */
  --murekkep-3:      #171F1C;   /* yükseltilmiş yüzey */
  --kemik:           #ECE7DD;   /* ana metin */
  --kemik-soluk:     #8C9490;   /* ikincil metin */
  --kemik-cok-soluk: #5C6663;   /* üçüncül metin */
  --pirinc:          #C79A5B;   /* vurgu — eskitilmiş altın */
  --pirinc-parlak:   #E3BC85;
  --pirinc-sis:      rgba(199,154,91,.12);
  --cizgi:           rgba(236,231,221,.10);
  --cizgi-koyu:      rgba(236,231,221,.06);
  --cam:             rgba(17,23,21,.72);
  --zit:             #0C100E;   /* pirinç zemin üstündeki yazı rengi */

  /* — Tipografi — */
  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:   ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* — Ölçü — */
  --kabuk-en:  76rem;   /* içerik genişliği */
  --olcu:      38rem;   /* rahat okunan metin sütunu */
  --radius:    18px;
  --radius-sm: 12px;

  /* — Hareket — */
  --yay: cubic-bezier(.22,.61,.36,1);
  --hiz: .45s;
}

/* — Renk: açık tema — */
[data-tema="acik"]{
  --murekkep:        #F6F3EC;
  --murekkep-2:      #FFFFFF;
  --murekkep-3:      #FBF9F4;
  --kemik:           #141917;
  --kemik-soluk:     #5E6764;
  --kemik-cok-soluk: #8A918E;
  --pirinc:          #8A6428;
  --pirinc-parlak:   #6F4F1C;
  --pirinc-sis:      rgba(138,100,40,.10);
  --cizgi:           rgba(20,25,23,.12);
  --cizgi-koyu:      rgba(20,25,23,.07);
  --cam:             rgba(255,255,255,.78);
  --zit:             #FFFFFF;
}

/* ============================================================
   2. TEMEL
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;          /* JS kapalıysa bile menü bağlantıları yumuşak kayar */
}
/* Lenis (yumuşak kaydırma) devredeyken tarayıcının kendi kaydırmasını devre dışı bırak */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--murekkep);
  color:var(--kemik);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}

/* Sayfanın tamamına yayılan çok ince kumlanma dokusu.
   %3 opaklıkta — fark edilmez ama düz rengi malzemeye çevirir. */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* height:auto — genişlik/yükseklik özniteliği verilmiş görsellerin
   daraltılınca oranını koruması için gerekli */
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--pirinc); color:var(--zit); }

/* Klavyeyle gezenler için görünür odak halkası — erişilebilirlik şart */
:focus-visible{
  outline:2px solid var(--pirinc);
  outline-offset:3px;
  border-radius:4px;
}

/* Ekran okuyucuya görünür, göze görünmez metin */
.gizli-metin{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* İçeriğe atla — sekme tuşuna basınca beliren erişilebilirlik bağlantısı */
.atla{
  position:absolute; top:-100px; left:1rem; z-index:100;
  background:var(--pirinc); color:var(--zit);
  padding:.7rem 1.1rem; border-radius:8px; font-size:.875rem;
  transition:top .2s;
}
.atla:focus{ top:1rem; }

/* ============================================================
   3. YARDIMCI SINIFLAR
   ============================================================ */
.kabuk{
  width:100%;
  max-width:var(--kabuk-en);
  margin-inline:auto;
  padding-inline:2rem;
  position:relative;
  z-index:2;
}

.blok{ padding-block:7rem; position:relative; }
.blok + .blok{ border-top:1px solid var(--cizgi-koyu); }

/* — Bölüm başlığı — */
.baslik-grubu{ max-width:44rem; margin-bottom:3.5rem; }

.etiket{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.6875rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--pirinc);
  margin:0 0 1.5rem;
}
.etiket::before{
  content:""; width:28px; height:1px;
  background:var(--pirinc); opacity:.6;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.01em;
  margin:0;
  color:var(--kemik);
}
h2{ font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.12; }
h3{ font-size:1.375rem; line-height:1.3; }

/* Serif başlıkların içinde vurgulanan kelime */
.vurgu{ color:var(--pirinc); font-style:italic; }

.giris{
  font-size:1.0625rem;
  color:var(--kemik-soluk);
  max-width:var(--olcu);
  margin:1.5rem 0 0;
}

/* — Butonlar — */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem;
  border-radius:100px;
  font-size:.9375rem; font-weight:400;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:background var(--hiz) var(--yay),color var(--hiz) var(--yay),
             border-color var(--hiz) var(--yay),transform .25s var(--yay);
  will-change:transform;
}
.dugme:hover{ transform:translateY(-2px); }
.dugme:active{ transform:translateY(0); }
.dugme svg{ width:17px; height:17px; }

.dugme--dolu{ background:var(--pirinc); color:var(--zit); }
.dugme--dolu:hover{ background:var(--pirinc-parlak); }

.dugme--bos{ border-color:var(--cizgi); color:var(--kemik); }
.dugme--bos:hover{ border-color:var(--pirinc); color:var(--pirinc); }

/* — Rozet — */
.rozet{
  display:inline-block;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pirinc);
  background:var(--pirinc-sis);
  border:1px solid rgba(199,154,91,.22);
  border-radius:100px;
  padding:.3rem .7rem;
  white-space:nowrap;   /* dar ekranda iki satıra bölünmesin */
}

/* — Kart yüzeyi (yumuşak degrade + kenar ışığı) — */
.yuzey{
  background:linear-gradient(160deg,var(--murekkep-3),var(--murekkep-2));
  border:1px solid var(--cizgi);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  transition:border-color var(--hiz) var(--yay),transform var(--hiz) var(--yay);
}
/* Üst kenarda ince ışık çizgisi — yüzeye derinlik verir */
.yuzey::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,231,221,.22),transparent);
  opacity:.7;
}

/* ============================================================
   4. BİLEŞENLER
   ============================================================ */

/* ---------- 4.1 ÜST MENÜ ---------- */
.menu{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .4s var(--yay),border-color .4s var(--yay),padding .4s var(--yay);
  border-bottom:1px solid transparent;
  padding-block:1.4rem;
}
/* Sayfa kaydırılınca menü buzlu cama dönüşür (JS .menu--yapisik ekler) */
.menu--yapisik{
  background:var(--cam);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--cizgi);
  padding-block:.85rem;
}
.menu__ic{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.logo{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.1em;
  color:var(--kemik);
}
.logo__isaret{
  width:30px; height:30px; flex:none;
  border:1px solid var(--pirinc); border-radius:8px;
  display:grid; place-items:center;
  color:var(--pirinc); font-family:var(--sans);
  font-size:.75rem; letter-spacing:0;
  transition:background .3s var(--yay),color .3s var(--yay);
}
.logo:hover .logo__isaret{ background:var(--pirinc); color:var(--zit); }

.menu__baglantilar{ display:flex; align-items:center; gap:1.9rem; }
.menu__baglantilar a{
  font-size:.9375rem; color:var(--kemik-soluk);
  position:relative; padding-block:.25rem;
  transition:color .3s var(--yay);
}
.menu__baglantilar a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--pirinc);
  transition:width .35s var(--yay);
}
.menu__baglantilar a:hover{ color:var(--kemik); }
.menu__baglantilar a:hover::after{ width:100%; }

.menu__sag{ display:flex; align-items:center; gap:1rem; }

/* Tema düğmesi */
.tema-dugme{
  width:38px; height:38px; flex:none;
  border:1px solid var(--cizgi); border-radius:50%;
  display:grid; place-items:center; color:var(--kemik-soluk);
  transition:border-color .3s,color .3s,transform .3s var(--yay);
}
.tema-dugme:hover{ border-color:var(--pirinc); color:var(--pirinc); transform:rotate(25deg); }
.tema-dugme svg{ width:17px; height:17px; }
/* Aktif temaya göre güneş/ay ikonundan biri gizlenir */
[data-tema="acik"] .tema-dugme .ikon-ay{ display:none; }
:root:not([data-tema="acik"]) .tema-dugme .ikon-gunes{ display:none; }

/* Hamburger — sadece telefonda görünür */
.hamburger{ display:none; width:38px; height:38px; place-items:center; color:var(--kemik); }
.hamburger svg{ width:22px; height:22px; }

/* Telefon menüsü (tam ekran katman) */
.mobil-menu{
  position:fixed; inset:0; z-index:49;
  background:var(--murekkep);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 2rem 3rem;
  transform:translateY(-100%);
  transition:transform .55s var(--yay),visibility .55s;
  visibility:hidden;
}
.mobil-menu.acik{ transform:translateY(0); visibility:visible; }
.mobil-menu a{
  font-family:var(--serif); font-size:2rem; padding-block:.7rem;
  border-bottom:1px solid var(--cizgi-koyu); color:var(--kemik);
}
.mobil-menu .dugme{ margin-top:2rem; align-self:flex-start; font-family:var(--sans); font-size:.9375rem; border-bottom:0; }

/* ---------- 4.2 AÇILIŞ ---------- */
.acilis{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem 0 4rem;
  position:relative;
}

/* Arka planda yavaşça nefes alan ışık lekeleri — düz renk yerine derinlik */
.acilis__isik{
  position:absolute; inset:-20% -10% auto; height:120%;
  pointer-events:none; z-index:0; overflow:hidden;
}
.acilis__isik span{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  animation:yuz 18s ease-in-out infinite alternate;
}
.acilis__isik span:nth-child(1){
  width:44vw; height:44vw; top:2%; left:-6%;
  background:radial-gradient(circle,rgba(199,154,91,.30),transparent 70%);
}
.acilis__isik span:nth-child(2){
  width:38vw; height:38vw; top:32%; right:-4%;
  background:radial-gradient(circle,rgba(90,140,120,.24),transparent 70%);
  animation-delay:-7s;
}
.acilis__isik span:nth-child(3){
  width:30vw; height:30vw; bottom:-8%; left:34%;
  background:radial-gradient(circle,rgba(199,154,91,.16),transparent 70%);
  animation-delay:-12s;
}
[data-tema="acik"] .acilis__isik span{ opacity:.4; }

.acilis__ic{ position:relative; z-index:2; max-width:56rem; }

.acilis h1{
  font-size:clamp(2.9rem,8.2vw,6rem);
  line-height:1.02;
  letter-spacing:.005em;
  margin:0 0 1.75rem;
}
/* Başlıktaki her satır aşağıdan yukarı açılır (JS her satırı .satir kutusuna sarar) */
.satir{ display:block; overflow:hidden; }
.satir > span{ display:block; }

.acilis__ozet{
  font-size:1.1875rem;
  color:var(--kemik-soluk);
  max-width:34rem;
  margin:0 0 2.75rem;
}
.acilis__dugmeler{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Açılışın altındaki sayı şeridi */
.sayilar{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin-top:5rem;
  background:var(--cizgi-koyu);
  border-block:1px solid var(--cizgi-koyu);
  position:relative; z-index:2;
}
.sayilar li{ background:var(--murekkep); padding:1.75rem 1.25rem; }
.sayilar b{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:2.25rem; line-height:1; color:var(--kemik);
  margin-bottom:.5rem;
}
.sayilar span{
  font-size:.8125rem; color:var(--kemik-cok-soluk);
  letter-spacing:.04em;
}

/* ---------- 4.3 KAYAN ŞERİT (teknolojiler) ---------- */
.serit{
  border-block:1px solid var(--cizgi-koyu);
  padding-block:1.5rem;
  overflow:hidden;
  /* Kenarlarda yumuşak kaybolma — şerit kesik durmasın */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.serit__ray{ display:flex; width:max-content; animation:kay 48s linear infinite; }
.serit:hover .serit__ray{ animation-play-state:paused; }
.serit__grup{ display:flex; align-items:center; gap:3.5rem; padding-right:3.5rem; }
.serit__grup span{
  font-size:.875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kemik-cok-soluk); white-space:nowrap;
  display:flex; align-items:center; gap:3.5rem;
}
.serit__grup span::after{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--pirinc); opacity:.45;
}

/* ---------- 4.4 HİZMETLER (bento ızgara) ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.25rem;
}
.kart{ padding:2.25rem; display:flex; flex-direction:column; }
.kart:hover{ border-color:rgba(199,154,91,.35); transform:translateY(-4px); }

/* Kartın üstünde imleci takip eden yumuşak ışık (JS --mx/--my günceller) */
.kart::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             rgba(199,154,91,.10),transparent 65%);
  opacity:0; transition:opacity .4s var(--yay);
}
.kart:hover::after{ opacity:1; }

.kart--genis{ grid-column:span 4; }
.kart--dar  { grid-column:span 2; }
.kart--yari { grid-column:span 3; }
.kart--tam  { grid-column:span 6; }

.kart__ikon{
  width:46px; height:46px; flex:none;
  border-radius:12px;
  display:grid; place-items:center;
  background:var(--pirinc-sis);
  border:1px solid rgba(199,154,91,.20);
  color:var(--pirinc);
  margin-bottom:1.5rem;
}
.kart__ikon svg{ width:21px; height:21px; }

.kart h3{ margin-bottom:.75rem; }
.kart p{
  margin:0; color:var(--kemik-soluk);
  font-size:.9375rem; line-height:1.7;
}

/* Kart altındaki teknoloji etiketleri */
.etiketler{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:1.75rem; }
.etiketler li{
  font-size:.75rem; letter-spacing:.03em;
  color:var(--kemik-cok-soluk);
  border:1px solid var(--cizgi);
  border-radius:100px;
  padding:.28rem .7rem;
  transition:color .3s;
}
.kart:hover .etiketler li{ color:var(--kemik-soluk); }

/* Altyapı kartı: içinde iki sütun */
.kart--altyapi{ display:grid; grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:center; }
.altyapi-liste{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.5rem; }
.altyapi-liste li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.875rem; color:var(--kemik-soluk);
}
.altyapi-liste svg{ width:15px; height:15px; color:var(--pirinc); flex:none; margin-top:.35rem; }

/* ---------- 4.5 SÜREÇ ---------- */
.surec{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--cizgi);
}
.adim{
  padding:2.5rem 1.75rem 2.5rem 0;
  border-right:1px solid var(--cizgi-koyu);
  position:relative;
}
.adim:last-child{ border-right:0; }
.adim:not(:first-child){ padding-left:1.75rem; }

/* Üst çizgide ilerleyen küçük nokta */
.adim::before{
  content:""; position:absolute; top:-5px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--murekkep); border:1px solid var(--pirinc);
  transition:background .35s var(--yay);
}
.adim:not(:first-child)::before{ left:1.75rem; }
.adim:hover::before{ background:var(--pirinc); }

.adim__no{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.14em; color:var(--pirinc);
  display:block; margin-bottom:1rem;
}
.adim h3{ font-size:1.25rem; margin-bottom:.65rem; }
.adim p{ margin:0; font-size:.9rem; color:var(--kemik-soluk); line-height:1.7; }
.adim__sure{
  display:block; margin-top:1.25rem;
  font-size:.75rem; letter-spacing:.06em;
  color:var(--kemik-cok-soluk);
}

/* ---------- 4.6 NEDEN CLAIO ---------- */
.neden{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.neden .kart{ padding:2rem; }
.neden .kart h3{ font-size:1.25rem; }

/* ---------- 4.7 ALT ALAN ADLARI ---------- */
.alanlar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.alan{
  padding:1.9rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.alan__ust{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.alan__adres{
  font-family:var(--mono); font-size:.875rem;
  color:var(--kemik); letter-spacing:-.01em;
}
.alan p{ margin:0; font-size:.875rem; color:var(--kemik-soluk); }
.alan--yakinda{ opacity:.62; }
.alan--yakinda .rozet{
  color:var(--kemik-cok-soluk);
  background:transparent; border-color:var(--cizgi);
}

/* ---------- 4.8 EKİP ---------- */
.ekip{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.kisi{ padding:2.25rem; display:flex; gap:1.5rem; align-items:flex-start; }
.kisi__avatar{
  width:64px; height:64px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--pirinc-sis);
  border:1px solid rgba(199,154,91,.25);
  font-family:var(--serif); font-size:1.6rem; color:var(--pirinc);
}
.kisi h3{ font-size:1.3rem; margin-bottom:.2rem; }
.kisi__rol{
  display:block; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pirinc); margin-bottom:.9rem;
}
.kisi p{ margin:0; font-size:.9rem; color:var(--kemik-soluk); line-height:1.7; }

/* ---------- 4.9 SSS (akordiyon) ---------- */
.sss{ max-width:52rem; border-top:1px solid var(--cizgi-koyu); }
.sss details{ border-bottom:1px solid var(--cizgi-koyu); }
.sss summary{
  list-style:none; cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:var(--serif); font-size:1.25rem;
  color:var(--kemik);
  transition:color .3s var(--yay);
}
.sss summary::-webkit-details-marker{ display:none; }
.sss summary:hover{ color:var(--pirinc); }

/* Sağdaki artı işareti — açılınca çarpıya döner */
.sss summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:13px; height:13px;
  background:
    linear-gradient(var(--pirinc),var(--pirinc)) center/13px 1px no-repeat,
    linear-gradient(var(--pirinc),var(--pirinc)) center/1px 13px no-repeat;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .4s var(--yay);
}
.sss details[open] summary::after{ transform:translateY(-50%) rotate(135deg); }

.sss__cevap{
  padding:0 3rem 1.75rem 0;
  color:var(--kemik-soluk);
  font-size:.9375rem;
  max-width:var(--olcu);
  animation:acil .4s var(--yay);
}
.sss__cevap p{ margin:0 0 .9rem; }
.sss__cevap p:last-child{ margin-bottom:0; }

/* ---------- 4.10 İLETİŞİM ---------- */
.iletisim{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }

.iletisim-bilgi ul{ margin-top:2.5rem; display:grid; gap:1.5rem; }
.iletisim-bilgi li{ display:flex; gap:1rem; align-items:flex-start; }
.iletisim-bilgi svg{ width:18px; height:18px; color:var(--pirinc); flex:none; margin-top:.3rem; }
.iletisim-bilgi b{
  display:block; font-weight:400; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--kemik-cok-soluk); margin-bottom:.2rem;
}
.iletisim-bilgi a{ color:var(--kemik); border-bottom:1px solid var(--cizgi); transition:border-color .3s,color .3s; }
.iletisim-bilgi a:hover{ color:var(--pirinc); border-color:var(--pirinc); }

/* Form */
.form{ display:grid; gap:1.1rem; }
.form__satir{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.alan-grubu{ display:grid; gap:.5rem; }
.alan-grubu label{
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--kemik-cok-soluk);
}
.form input,.form select,.form textarea{
  width:100%;
  font:inherit; font-size:.9375rem;
  color:var(--kemik);
  /* background-color kullanılıyor (background kısayolu değil) — kısayol,
     aşağıda select için tanımlanan açılır ok simgesini silerdi. */
  background-color:var(--murekkep-2);
  border:1px solid var(--cizgi);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  transition:border-color .3s,background-color .3s;
}
.form textarea{ resize:vertical; min-height:8rem; }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--pirinc); background-color:var(--murekkep-3);
}
.form input::placeholder,.form textarea::placeholder{ color:var(--kemik-cok-soluk); }
/* Tarayıcının kendi açılır ok simgesi yerine temayla uyumlu bir ok.
   currentColor kullanılamadığı için renk doğrudan gömülü. */
.form select{
  appearance:none; cursor:pointer;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C9490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
[data-tema="acik"] .form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6764' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form__not{ font-size:.8125rem; color:var(--kemik-cok-soluk); margin:0; }

/* ---------- 4.11 KAPANIŞ ÇAĞRISI ---------- */
.cagri{
  text-align:center;
  padding:5rem 2rem;
  border-radius:var(--radius);
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--murekkep-3),var(--murekkep-2));
  border:1px solid var(--cizgi);
}
.cagri::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px circle at 50% 0%,rgba(199,154,91,.14),transparent 70%);
}
.cagri > *{ position:relative; z-index:2; }
.cagri h2{ margin-bottom:1.25rem; }
.cagri p{ color:var(--kemik-soluk); max-width:34rem; margin:0 auto 2.25rem; }
.cagri .acilis__dugmeler{ justify-content:center; }

/* ---------- 4.12 DİP BİLGİ ---------- */
.dip{ border-top:1px solid var(--cizgi); padding-block:4rem 2.5rem; }
.dip__ust{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:3rem; margin-bottom:3.5rem;
}
.dip__marka p{
  margin:1.1rem 0 0; font-size:.875rem;
  color:var(--kemik-soluk); max-width:22rem;
}
.dip h4{
  font-family:var(--sans); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--kemik-cok-soluk); margin-bottom:1.1rem;
}
.dip ul{ display:grid; gap:.7rem; }
.dip ul a{ font-size:.9rem; color:var(--kemik-soluk); transition:color .3s; }
.dip ul a:hover{ color:var(--pirinc); }

.dip__alt{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  padding-top:2rem; border-top:1px solid var(--cizgi-koyu);
  font-size:.8125rem; color:var(--kemik-cok-soluk);
}

/* ---------- 4.13 YUKARI ÇIK ---------- */
.yukari{
  position:fixed; right:1.75rem; bottom:1.75rem; z-index:40;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cam); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--cizgi); color:var(--kemik);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s,transform .35s var(--yay),visibility .35s,border-color .3s,color .3s;
}
.yukari.gorunur{ opacity:1; visibility:visible; transform:none; }
.yukari:hover{ border-color:var(--pirinc); color:var(--pirinc); }
.yukari svg{ width:18px; height:18px; }

/* ---------- 4.14 AÇILIŞTAKİ 3D OBJE ----------
   Three.js ile çizilen dönen tel kafes. Sadece geniş ekranlarda
   gösterilir; telefonda hem yer kaplar hem de pil harcar. */
.sahne{
  /* Biraz yukarıda duruyor: altındaki sayı şeridiyle çakışmasın.
     right değeri pozitif — obje ekranın sağ kenarından taşmıyor,
     tamamen görünüyor ve metnin yanına yaklaşıyor. */
  position:absolute; top:44%; right:2vw;
  width:40vw; height:40vw;
  max-width:600px; max-height:600px;
  transform:translateY(-50%);
  z-index:1; pointer-events:none;
  opacity:0;                       /* JS, obje hazır olunca açar */
  transition:opacity 1.4s ease;
}
.sahne.hazir{ opacity:1; }
.sahne canvas{
  width:100% !important; height:100% !important; display:block;
  /* Kenarlarda yumuşak eriyiş. Tuval dikdörtgen olduğu için dış halka
     ya da toz kenara değdiğinde keskin bir kesik oluşur ve obje bir
     çerçeve içindeymiş gibi görünür. Bu maske o sınırı görünmez kılar. */
  /* %74'e kadar tam opak: küre (yarıçapın %71'i) net kalır.
     Sonrasında halka ve toz yumuşakça erir. */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    #000 74%, rgba(0,0,0,.55) 88%, transparent 99%);
          mask-image:radial-gradient(circle at 50% 50%,
    #000 74%, rgba(0,0,0,.55) 88%, transparent 99%);
}

/* Obje varken metin sütununu daraltıp çakışmayı önle */
.acilis--sahneli .acilis__ic{ max-width:44rem; }

/* 1300px altında obje ile metin çakışmaya başlıyor — orada objeyi kapat */
@media (max-width:1300px){
  .sahne{ display:none; }
  .acilis--sahneli .acilis__ic{ max-width:56rem; }
}

/* ---------- 4.15 PROJELER ---------- */
.projeler{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }

.proje{
  padding:1.25rem;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;      /* içindeki katmanlar derinlik kazansın */

  /* min-width:0 şart. Izgara öğeleri varsayılan olarak min-width:auto
     kullanır; bu da içerideki görselin 1600px'lik doğal genişliğini
     sütuna dayatıp kartı ekrandan taşırır. */
  min-width:0;
}
.proje:hover{ border-color:rgba(199,154,91,.35); }

/* Sahte tarayıcı penceresi — ekran görüntüsü yerine geçer */
.proje__ekran{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--cizgi);
  background:var(--murekkep);
  transform:translateZ(26px);       /* kart eğilince öne çıkar */
  transition:transform .4s var(--yay);
}
.proje__cubuk{
  display:flex; gap:6px; align-items:center;
  padding:.6rem .8rem;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--cizgi-koyu);
}
.proje__cubuk span{
  width:8px; height:8px; border-radius:50%;
  background:var(--kemik-cok-soluk); opacity:.5;
}
/* ---- Önizleme penceresi ----
   Vitrin sabit oranlı bir "ekran"; içindeki görsel sayfanın TAMAMI
   olduğu için çok daha uzun ve taşan kısmı kırpılıyor.
   Üzerine gelince görsel yukarı kayarak sayfanın tamamını gösteriyor. */
.proje__vitrin{
  position:relative;
  /* 16/10 — ekran görüntüleri ve videolar 1440x900 (yani 1.6) oranında.
     16/9 yapılırsa uygulama arayüzünün alt çubuğu kırpılıyor. */
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--murekkep-2);
}

.proje__gorsel{
  display:block; width:100%;
  /* height:auto şart. HTML'deki height özniteliği tarayıcı tarafından
     height:...px olarak uygulanır; auto demezsek görsel doğal
     boyutunda kalır ve dev gibi görünür. */
  height:auto;
  /* Fare çekilince yumuşak ve hızlı geri dönüş */
  transition:transform .8s var(--yay);
  will-change:transform;
}

/* Uzun sayfalar: baştan sona kaydır. --kaydir ve --sure JS tarafından
   her görselin gerçek yüksekliğine göre hesaplanıp yazılır. */
.proje--kaydir:hover .proje__gorsel,
.proje--kaydir.oynat .proje__gorsel{
  transform:translate3d(0,calc(var(--kaydir,0px) * -1),0);
  transition-duration:var(--sure,6s);
  transition-timing-function:linear;   /* sabit hız — kaydırma hissi */
}

/* Tek ekranlık uygulamalar: kaydıracak yer yok, onun yerine
   yavaşça yakınlaş. */
.proje--yakinlas .proje__gorsel{ transition-duration:1.6s; }
.proje--yakinlas:hover .proje__gorsel,
.proje--yakinlas.oynat .proje__gorsel{ transform:scale(1.07); }

/* ---- Kullanım videosu ----
   Uygulamanın gerçekten kullanıldığı kayıt. Görselin üstünde durur ama
   oynamaya başlayana kadar görünmez; böylece video desteklenmezse veya
   indirilemezse alttaki görsel önizlemesi devrede kalır, hiçbir şey bozulmaz.
   preload="none" olduğu için sayfa açılışında tek bayt inmez. */
.proje__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--yay);
}
.proje.oynuyor .proje__video{ opacity:1; }

/* Video oynarken görselin kaydırma animasyonunu boşuna çalıştırma */
.proje.oynuyor .proje__gorsel{ transform:none; }

/* Videosu olan kartta görsel kaydırması HEMEN başlamaz.
   Video genelde yarım saniyede hazır olur; görsel de aynı anda kaymaya
   başlasaydı, video devralınca sayfa başa sarmış gibi görünürdü.
   JS 700 ms bekler; video o süre içinde başlarsa görsel hiç oynamaz,
   başlamazsa (yavaş bağlantı) devreye girip boş bekleme yaşatmaz. */
.proje--videolu.proje--kaydir:hover .proje__gorsel{ transform:none; }
.proje--videolu.proje--kaydir.gorsel-oynat .proje__gorsel{
  transform:translate3d(0,calc(var(--kaydir,0px) * -1),0);
  transition-duration:var(--sure,6s);
  transition-timing-function:linear;
}

/* Çerçevenin köşesindeki ipucu */
.proje__ipucu{
  margin-left:auto;
  font-size:.6875rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--kemik-cok-soluk);
  transition:color .35s var(--yay);
}
.proje:hover .proje__ipucu{ color:var(--pirinc); }
/* Dokunmatik cihazda "üzerine gel" yazmanın anlamı yok */
@media (hover:none){ .proje__ipucu{ display:none; } }

/* Görsel yoksa kullanılan yedek: renkli tarayıcı penceresi çizimi */
.proje__icerik{
  aspect-ratio:16/9;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:.4rem; text-align:center; padding:1rem;
  position:relative; overflow:hidden;
}
/* Her projenin kendi rengi — arka plandaki degrade */
.proje__icerik::before{
  content:""; position:absolute; inset:0;
  background:var(--proje-renk,radial-gradient(circle at 50% 40%,rgba(199,154,91,.35),transparent 70%));
}
/* Üstte ince ızgara dokusu, ekrana yüzey hissi verir */
.proje__icerik::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(236,231,221,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,231,221,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
.proje__logo,.proje__alt{ position:relative; z-index:2; }
.proje__logo{
  font-family:var(--serif); font-size:1.75rem;
  color:var(--kemik); letter-spacing:.02em; line-height:1.15;
}
.proje__alt{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--kemik-soluk);
}

/* ---- Öne çıkan kart ----
   Izgaranın iki sütununu birden kaplar; görsel bir yanda, metin diğer
   yanda durur. Uzun tanıtım sitelerini göstermek için kullanılıyor. */
.proje--one{
  grid-column:span 2;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:1.9rem;
  align-items:center;
}
/* Sırayla ters çevrilir; iki büyük kart üst üste gelince tekdüze durmasın.
   Sütun oranı da ters çevrilmeli — yoksa görsel dar sütuna düşer. */
.proje--ters{ grid-template-columns:1fr 1.3fr; }
.proje--ters .proje__ekran{ order:2; }
.proje--one .proje__bilgi{ padding:.6rem .6rem .6rem .4rem; }
.proje--ters .proje__bilgi{ padding-left:1.1rem; }

.proje__bilgi{ padding:1.6rem .9rem .6rem; display:flex; flex-direction:column; flex:1; }
.proje__ust{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem 1rem; margin-bottom:.7rem;
  flex-wrap:wrap;       /* başlık uzunsa rozet alt satıra insin, kırılmasın */
}
.proje__ust h3{ font-size:1.3rem; }
.proje p{ margin:0; font-size:.9rem; color:var(--kemik-soluk); line-height:1.7; }

/* ---------- 4.16 3D EĞİLME ----------
   JS, kartlara fareye göre rotationX / rotationY uygular.
   Buradaki tek iş perspektif vermek — kart olmadan derinlik oluşmaz. */
.bento,.neden,.projeler,.alanlar,.ekip{ perspective:1400px; }

/* ============================================================
   5. ANİMASYONLAR
   ============================================================ */
@keyframes yuz{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(3vw,-4vh,0) scale(1.12); }
}
@keyframes kay{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }   /* şerit iki kez basılır, %50 tam bir tur eder */
}
@keyframes acil{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}

/* JS yüklendiğinde .js-hazir eklenir; belirme animasyonu ancak o zaman
   devreye girer. Böylece JS çalışmazsa içerik gizli kalmaz. */
.js-hazir .belir{ opacity:0; transform:translateY(26px); }

/* Ana başlık JS tarafından satırlara bölünüp animasyonla açılır.
   Bölünme öncesi bir kare görünmesin diye başlangıçta saklanır;
   GSAP ölçümü bitirince görünür yapar. */
.js-hazir #anaBaslik{ opacity:0; }

/* Hareket hassasiyeti olan kullanıcılar için: tüm hareketi kapat.
   Bazı insanlarda hareketli arayüz baş dönmesi yapar; tarayıcı ayarında
   bunu belirtirler ve site buna saygı göstermelidir. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-hazir .belir{ opacity:1 !important; transform:none !important; }
  .serit__ray{ animation:none; }
}

/* ============================================================
   6. DUYARLILIK
   ============================================================ */

/* — Dizüstü / küçük masaüstü — */
@media (max-width:1080px){
  .blok{ padding-block:5.5rem; }
  /* Menüde altı bağlantı + buton var; bu genişlikte biraz sıkıştırılır */
  .menu__baglantilar{ gap:1.4rem; }
  .menu__baglantilar a{ font-size:.875rem; }
  .menu__sag .dugme{ padding:.8rem 1.2rem; font-size:.875rem; }
  .surec{ grid-template-columns:repeat(2,1fr); }
  .adim{ border-bottom:1px solid var(--cizgi-koyu); }
  .adim:nth-child(2){ border-right:0; }
  .adim:nth-child(3),.adim:nth-child(4){ border-bottom:0; }
  .adim:nth-child(3){ padding-left:0; }
  .adim:nth-child(3)::before{ left:0; }
  .alanlar{ grid-template-columns:1fr 1fr; }
}

/* — Tablet — */
@media (max-width:900px){
  .menu__baglantilar{ display:none; }
  .hamburger{ display:grid; }
  .menu__sag .dugme{ display:none; }

  .bento{ grid-template-columns:1fr 1fr; }
  .kart--genis,.kart--dar,.kart--yari,.kart--tam{ grid-column:span 2; }
  .kart--altyapi{ grid-template-columns:1fr; gap:1.75rem; }

  .iletisim{ grid-template-columns:1fr; gap:3rem; }
  .dip__ust{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .dip__marka{ grid-column:span 2; }
}

/* — Telefon — */
@media (max-width:640px){
  body{ font-size:1rem; }
  .kabuk{ padding-inline:1.35rem; }
  .blok{ padding-block:4.5rem; }
  .baslik-grubu{ margin-bottom:2.5rem; }

  .acilis{ min-height:auto; padding:8rem 0 3.5rem; }
  .acilis__ozet{ font-size:1.0625rem; }
  .acilis__dugmeler{ flex-direction:column; align-items:stretch; }
  .acilis__dugmeler .dugme{ width:100%; }

  .sayilar{ grid-template-columns:1fr 1fr; margin-top:3.5rem; }
  .sayilar b{ font-size:1.85rem; }

  .bento,.neden,.ekip,.alanlar,.projeler{ grid-template-columns:1fr; }
  .proje__logo{ font-size:1.5rem; }
  /* Öne çıkan kart telefonda normal karta döner: görsel üstte, metin altta */
  .proje--one{ grid-column:span 1; grid-template-columns:1fr; gap:0; }
  .proje--ters .proje__ekran{ order:0; }
  .proje--one .proje__bilgi,
  .proje--ters .proje__bilgi{ padding:1.6rem .9rem .6rem; }
  .kart{ padding:1.75rem; }
  .altyapi-liste{ grid-template-columns:1fr; }

  .surec{ grid-template-columns:1fr; }
  .adim{
    border-right:0; border-bottom:1px solid var(--cizgi-koyu);
    padding:2rem 0 2rem 1.5rem;
  }
  .adim:not(:first-child){ padding-left:1.5rem; }
  .adim:last-child{ border-bottom:0; }
  .adim::before,.adim:not(:first-child)::before{ top:2.35rem; left:-5px; }

  .kisi{ flex-direction:column; gap:1.1rem; }
  .sss summary{ font-size:1.125rem; padding-right:2.5rem; }
  .form__satir{ grid-template-columns:1fr; }
  .cagri{ padding:3.5rem 1.5rem; }
  .yukari{ right:1.1rem; bottom:1.1rem; }
}