/* Murat Canördek portfolyo, ikinci tasarım.
   Fikir: bir ürün tanıtım sayfası gibi. Giriş ve kapanış şafak öncesi
   gökyüzü (uçak mühendisliğine selam), aradaki her iş kendi ürününün
   renk dünyasında büyük bir panel. */

:root {
  --gece: #080d1a;
  --kagit: #f7f8fa;
  --murekkep: #0b1220;
  --ikincil-yazi: #47536e;
  --ince-cizgi: #dfe3ea;
  --safak: #ffb27a;

  --baslik: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --govde: "Onest", "Segoe UI", system-ui, sans-serif;

  --kap: 1120px;
  --kenar: clamp(20px, 4vw, 48px);
  --yumusak: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #2457f5; color: #fff; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid #6ea0ff; outline-offset: 3px; border-radius: 6px; }

.kap { max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }

.atla {
  position: fixed; left: -999px; top: 10px; z-index: 100;
  background: #fff; color: var(--murekkep); padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.atla:focus { left: 10px; }

h1, h2, h3, h4, .is-ad {
  font-family: var(--baslik);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h1, h2, .is h3 { letter-spacing: -0.035em; line-height: 0.98; }

.simge {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- düğmeler ---------- */

.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.2s var(--yumusak), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dugme:hover { transform: translateY(-2px); }
.dugme .simge { transition: transform 0.2s var(--yumusak); }
.dugme:hover .simge { transform: translateX(3px); }
.dugme-acik { background: #fff; color: var(--gece); box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.45); }
.dugme-acik:hover { background: #fff4ea; }
.dugme-hayalet { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); }
.dugme-hayalet:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.dugme-vurgu { background: var(--vurgu); color: var(--vurgu-yazi); }
.dugme-buyuk { padding: 18px 30px; font-size: 1.08rem; }

/* ---------- üst gezinme: yüzen hap ---------- */

.ust {
  position: fixed; top: 14px; left: 50%; z-index: 40;
  transform: translateX(-50%);
  width: min(var(--kap), calc(100% - 28px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.ust-ad { font-family: var(--baslik); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.ust nav { display: flex; gap: clamp(14px, 2.6vw, 34px); }
.ust nav a { text-decoration: none; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); transition: color 0.15s; }
.ust nav a:hover { color: #fff; }
.ust-dugme {
  text-decoration: none; font-weight: 600; font-size: 0.93rem; white-space: nowrap;
  background: #fff; color: var(--gece); padding: 10px 18px; border-radius: 999px;
  transition: background-color 0.2s;
}
.ust-dugme:hover { background: #ffe9d8; }

/* ---------- giriş ---------- */

.giris {
  position: relative;
  color: #fff;
  text-align: center;
  padding-top: clamp(140px, 17vw, 208px);
  padding-bottom: 1px; /* sahnenin alt boşluğu dışarı taşmasın, bölümün içinde kalsın */
  background:
    radial-gradient(90% 46% at 50% 104%, rgba(255, 170, 112, 0.34), rgba(255, 138, 92, 0.1) 46%, transparent 72%),
    radial-gradient(60% 50% at 88% 0%, rgba(88, 118, 255, 0.24), transparent 62%),
    radial-gradient(50% 40% at 6% 12%, rgba(64, 96, 220, 0.16), transparent 60%),
    var(--gece);
}

.rota { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rota-cizgi { stroke-dasharray: 2400; stroke-dashoffset: 0; }

.giris-ic { position: relative; }

.hazir {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 30px; padding: 8px 16px 8px 13px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
  font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.9);
}
.hazir span { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2); }

.giris-ad { font-family: var(--baslik); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; color: var(--safak); margin: 0 0 14px; }
.giris h1 { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 20ch; margin-inline: auto; line-height: 1.02; }

.giris-ozet {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6;
  max-width: 64ch; margin: clamp(22px, 3vw, 34px) auto 0; color: rgba(255, 255, 255, 0.76);
}
.giris-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(28px, 4vw, 40px) 0 0; }

/* cihaz sahnesi: bir sonraki bölümün üstüne taşar */
.sahne {
  position: relative; z-index: 2;
  margin-top: clamp(52px, 8vw, 104px);
  margin-bottom: calc(-1 * clamp(70px, 14vw, 230px));
}
.pencere {
  border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: #fff;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pencere-cubuk {
  display: flex; align-items: center; gap: 6px;
  height: clamp(24px, 2.6vw, 36px); padding: 0 clamp(10px, 1.2vw, 16px);
  background: #eef1f5; border-bottom: 1px solid #dde2e9;
}
.pencere-cubuk i { width: 9px; height: 9px; border-radius: 50%; background: #c3cad5; flex: none; }
.pencere-cubuk span {
  margin-inline: auto; transform: translateX(-21px);
  font: 500 0.72rem/1 var(--govde); color: #6b7686; background: #fff;
  padding: 5px 16px; border-radius: 7px; white-space: nowrap;
}
.pencere img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.pencere-on { position: relative; width: 74%; margin-inline: auto; transform: translateY(var(--kay-on, 0)); }
.pencere-arka {
  position: absolute; left: 0; top: 13%; width: 50%;
  transform: translateY(var(--kay-arka, 0)) rotate(-3.5deg); filter: brightness(0.86) saturate(0.9);
}
.telefon {
  position: absolute; right: 3%; bottom: -8%; width: 17%; aspect-ratio: 780 / 1560;
  transform: translateY(var(--kay-tel, 0));
  border: clamp(5px, 0.7vw, 10px) solid #0c1220; border-radius: clamp(18px, 2.6vw, 38px);
  overflow: hidden; background: #fff;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.telefon img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- işler ---------- */

.isler-giris {
  text-align: center;
  padding-top: calc(clamp(70px, 14vw, 230px) + clamp(72px, 9vw, 128px));
  padding-bottom: clamp(36px, 5vw, 64px);
}
.isler-giris h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.isler-giris p { max-width: 54ch; margin: 20px auto 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ikincil-yazi); }

.is {
  width: min(1340px, calc(100% - 2 * clamp(10px, 2vw, 28px)));
  margin: 0 auto clamp(16px, 2.4vw, 32px);
  border-radius: clamp(26px, 3.4vw, 48px);
  background: var(--zemin); color: var(--yazi);
  overflow: hidden;
}
.is-ic { max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding: clamp(44px, 7.5vw, 104px) var(--kenar); }

.is-cvparker {
  --zemin: radial-gradient(70% 50% at 100% 0%, #d6e2ff, transparent 62%), #ecf1ff;
  --yazi: #0a1226; --ikincil: #47536e; --vurgu: #2457f5; --vurgu-yazi: #fff;
  --kutu: #fff; --cizgi: rgba(20, 40, 110, 0.12); --golge: rgba(36, 87, 245, 0.4);
}
.is-docly {
  --zemin: radial-gradient(65% 50% at 0% 0%, rgba(95, 227, 177, 0.17), transparent 62%), #0c1f1b;
  --yazi: #f1f7f4; --ikincil: #a6bdb5; --vurgu: #5fe3b1; --vurgu-yazi: #06231b;
  --kutu: rgba(255, 255, 255, 0.055); --cizgi: rgba(255, 255, 255, 0.13); --golge: rgba(0, 0, 0, 0.75);
}
.is-magaza {
  --zemin: radial-gradient(70% 50% at 100% 0%, #dbe4f7, transparent 62%), #f1f4fa;
  --yazi: #0a1a3f; --ikincil: #4b5878; --vurgu: #12306f; --vurgu-yazi: #fff;
  --kutu: #fff; --cizgi: rgba(10, 26, 63, 0.12); --golge: rgba(10, 26, 63, 0.42);
}
.is-egitim {
  --zemin: radial-gradient(65% 50% at 0% 0%, rgba(255, 200, 96, 0.13), transparent 62%), #14161c;
  --yazi: #f3f4f6; --ikincil: #a8afbc; --vurgu: #ffc860; --vurgu-yazi: #241800;
  --kutu: rgba(255, 255, 255, 0.05); --cizgi: rgba(255, 255, 255, 0.13); --golge: rgba(0, 0, 0, 0.75);
}

.is-bas { max-width: 820px; }

.rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.rozetler li {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--cizgi);
  font-size: 0.84rem; font-weight: 500; line-height: 1.3; color: var(--ikincil);
}
.rozetler li:first-child { background: var(--vurgu); border-color: transparent; color: var(--vurgu-yazi); font-weight: 600; }

.is h3 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); margin-top: clamp(26px, 3.6vw, 40px); }
.is-tanim { font-family: var(--baslik); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--vurgu); margin: 14px 0 0; }
.is-ozet { font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.6; color: var(--ikincil); margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 62ch; }
.is-baglanti { margin: 28px 0 0; }

/* ekran kaydı */
.kayit { margin: clamp(40px, 6vw, 76px) 0 0; }
.kayit-cerceve {
  border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden; background: #fff;
  box-shadow: 0 60px 110px -50px var(--golge), 0 0 0 1px var(--cizgi);
}
.kayit video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #fff; }
.kayit figcaption { font-size: 0.96rem; color: var(--ikincil); margin-top: 18px; max-width: 72ch; }

/* galeri */
.galeri { margin-top: clamp(40px, 6vw, 76px); }
.galeri-ek { margin-top: clamp(28px, 4vw, 48px); }
.galeri figure { margin: 0; }

.buyuk {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden; background: #fff;
  box-shadow: 0 60px 110px -50px var(--golge), 0 0 0 1px var(--cizgi);
  transition: transform 0.35s var(--yumusak), box-shadow 0.35s var(--yumusak);
}
.buyuk:hover { transform: translateY(-4px); box-shadow: 0 70px 120px -50px var(--golge), 0 0 0 1px var(--cizgi); }
.buyuk img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* telefon görüntüsü seçilince pencere yerine telefon */
.buyuk.dik-gorsel { background: transparent; box-shadow: none; overflow: visible; }
.buyuk.dik-gorsel:hover { transform: none; }
.buyuk.dik-gorsel .pencere-cubuk { display: none; }
.buyuk.dik-gorsel img {
  width: auto; height: min(680px, 74vh); aspect-ratio: auto; margin-inline: auto;
  border: 10px solid #0c1220; border-radius: 40px; background: #fff;
  box-shadow: 0 50px 100px -40px var(--golge), 0 0 0 1px var(--cizgi);
}

.galeri figcaption { font-size: 0.96rem; color: var(--ikincil); margin-top: 18px; max-width: 72ch; min-height: 3.2em; }

.kucukler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.kucukler button {
  flex: none; width: 116px; height: 72px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--cizgi); opacity: 0.55;
  transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s var(--yumusak);
}
.kucukler button.dik { width: 46px; }
.kucukler button:hover { opacity: 1; transform: translateY(-2px); }
.kucukler button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--vurgu); }
.kucukler img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* vaka anlatımı: her projede aynı beş başlık */
.vaka {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
  margin-top: clamp(44px, 6.5vw, 84px);
}
.vaka > section {
  background: var(--kutu); border: 1px solid var(--cizgi);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(22px, 3vw, 36px);
}
.vaka .vaka-genis { grid-column: 1 / -1; }
.vaka h4 {
  font-family: var(--govde); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.01em;
  color: var(--vurgu); margin: 0 0 12px;
}
.vaka p { margin: 0; font-size: 1.04rem; }
.vaka ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 32px) clamp(24px, 3.4vw, 48px); }
.vaka li { color: var(--ikincil); }
.vaka li b { display: block; color: var(--yazi); font-family: var(--baslik); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 6px; }

.teknoloji { margin: clamp(30px, 4.5vw, 52px) 0 0; font-size: 0.97rem; color: var(--ikincil); }
.teknoloji span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--yazi); margin-bottom: 4px; }

/* ---------- yaklaşım ---------- */

.yaklasim { padding-block: clamp(88px, 13vw, 176px) clamp(40px, 6vw, 80px); }
.yaklasim-bas h2, .yetkinlikler h2, .yolculuk h2 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
.yaklasim-bas p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ikincil-yazi);
  max-width: 58ch; margin: clamp(22px, 3vw, 32px) 0 0;
}
.ilkeler {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 7vw, 88px);
}
.ilkeler > div { border-top: 1px solid var(--ince-cizgi); padding-top: 24px; position: relative; }
.ilkeler > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 3px; background: var(--murekkep); border-radius: 2px; }
.ilkeler h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.ilkeler p { margin: 0; color: var(--ikincil-yazi); }

/* ---------- yetkinlikler ---------- */

.yetkinlikler { padding-block: clamp(40px, 6vw, 80px); }
.beceri { margin: clamp(32px, 5vw, 56px) 0 0; border-bottom: 1px solid var(--ince-cizgi); }
.beceri div {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 4fr);
  gap: 6px clamp(20px, 4vw, 56px);
  padding: clamp(18px, 2.4vw, 26px) 0; border-top: 1px solid var(--ince-cizgi);
}
.beceri dt { font-weight: 600; color: var(--ikincil-yazi); }
.beceri dd { margin: 0; font-size: 1.08rem; font-weight: 500; }

/* ---------- deneyim ---------- */

.yolculuk { padding-block: clamp(40px, 6vw, 80px) clamp(88px, 13vw, 176px); }
.duraklar { margin-top: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--ince-cizgi); }
.duraklar li {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 4fr);
  gap: 6px clamp(20px, 4vw, 56px);
  padding: clamp(20px, 2.8vw, 30px) 0; border-top: 1px solid var(--ince-cizgi);
}
.duraklar time { font-weight: 600; color: var(--ikincil-yazi); line-height: 1.5; }
.duraklar h3 { font-family: var(--govde); font-weight: 600; font-size: 1.12rem; line-height: 1.4; letter-spacing: 0; margin-bottom: 6px; }
.duraklar p { margin: 0; color: var(--ikincil-yazi); max-width: 66ch; }

/* ---------- iletişim ---------- */

.iletisim {
  color: #fff; text-align: center;
  border-radius: clamp(26px, 3.4vw, 48px) clamp(26px, 3.4vw, 48px) 0 0;
  padding-top: clamp(96px, 13vw, 176px);
  background:
    radial-gradient(90% 55% at 50% -12%, rgba(255, 170, 112, 0.32), rgba(255, 138, 92, 0.08) 48%, transparent 72%),
    radial-gradient(60% 50% at 10% 100%, rgba(88, 118, 255, 0.2), transparent 62%),
    var(--gece);
}
.iletisim h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.iletisim-ozet {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6;
  max-width: 56ch; margin: clamp(24px, 3vw, 34px) auto 0; color: rgba(255, 255, 255, 0.76);
}
.iletisim-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(32px, 4.5vw, 48px) 0 0; }
.iletisim-eylem .dugme { overflow-wrap: anywhere; }

.kunye {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(64px, 9vw, 120px) 0 0; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.kunye div { padding: 24px 20px 24px 0; }
.kunye div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 20px; }
.kunye dt { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 4px; }
.kunye dd { margin: 0; font-weight: 500; line-height: 1.45; }

.alt {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 26px 30px; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.5);
}
.alt p { margin: 0; }

/* ---------- büyük görsel penceresi ---------- */

.isik {
  border: 0; padding: 0; background: transparent;
  max-width: min(96vw, 1500px); max-height: 94vh; width: max-content;
}
.isik::backdrop { background: rgba(6, 10, 20, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.isik img { max-width: 100%; max-height: 80vh; width: auto; margin-inline: auto; border-radius: 12px; background: #fff; }
.isik p { color: #e8edf3; font-size: 0.96rem; margin: 14px 4px 0; max-width: 80ch; }
.isik-kapat {
  display: block; margin: 0 0 12px auto; cursor: pointer;
  font: 600 0.95rem var(--govde); color: #fff; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 8px 18px;
}
.isik-kapat:hover { background: #fff; color: var(--gece); }

/* ---------- kaydırınca belirme ---------- */

.js [data-belir] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--yumusak), transform 0.8s var(--yumusak);
}
.js [data-belir].gorundu { opacity: 1; transform: none; }
.js .vaka > section:nth-child(2), .js .ilkeler > div:nth-child(2) { transition-delay: 0.08s; }
.js .ilkeler > div:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: no-preference) {
  .rota-cizgi { animation: rota-ciz 2.4s 0.2s var(--yumusak) backwards; }
  .hazir span { animation: nabiz 2.4s ease-in-out infinite; }
}
@keyframes rota-ciz { from { stroke-dashoffset: 2400; } }
@keyframes nabiz { 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-belir] { opacity: 1; transform: none; transition: none; }
  .dugme, .buyuk, .kucukler button { transition: none; }
}

/* ---------- dar ekran ---------- */

@media (max-width: 900px) {
  .vaka, .vaka ul, .ilkeler { grid-template-columns: 1fr; }
  .ust nav { display: none; }
  .ilkeler { gap: 36px; }
  .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kunye div:nth-child(3) { border-left: 0; padding-left: 0; }
  .kunye div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .pencere-on { width: 86%; }
  .pencere-arka { display: none; }
  .telefon { width: 24%; right: 14px; bottom: -10%; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .ust { padding-left: 18px; }
  .duraklar li, .beceri div { grid-template-columns: 1fr; }
  .kucukler button { width: 88px; height: 56px; }
  .kucukler button.dik { width: 36px; }
  .buyuk.dik-gorsel img { height: min(560px, 68vh); border-width: 8px; border-radius: 32px; }
  .pencere-cubuk span { display: none; }
  .alt { justify-content: flex-start; }
}

@media print {
  .ust, .kucukler, .giris-eylem, .atla, .rota, .is-baglanti { display: none; }
  .js [data-belir] { opacity: 1; transform: none; }
  .is { break-inside: avoid-page; }
}