/* ============================================================
   Asmani Software — tek ekran ajans sayfası
   Palet logodan: navy #232E5C · cyan #32AAE2
   ============================================================ */

:root{
  /* Marka */
  --navy:        #232E5C;
  --cyan:        #32AAE2;
  --cyan-soft:   #6FD2F5;

  /* Zemin */
  --bg:          #050914;
  --bg-deep:     #030610;

  /* Metin */
  --ink:         #EEF3FB;
  --ink-soft:    #A9B6D0;
  --ink-mute:    #6E7C9C;

  /* Cam yüzeyler */
  --glass:       rgba(255,255,255,.032);
  --glass-lift:  rgba(255,255,255,.055);
  --hair:        rgba(255,255,255,.085);
  --hair-lift:   rgba(255,255,255,.14);

  /* Geometri */
  --r-core:      24px;
  --r-card:      17px;

  /* Hareket — hiçbir yerde linear/ease-in-out yok */
  --ease:        cubic-bezier(.32,.72,0,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  /* Ölçek: viewport'a göre akışkan, scroll yok */
  --gutter:      clamp(16px, 3.4vw, 46px);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  min-height:100dvh;
  overflow:hidden;                 /* scrollsuz tek ekran */
  /* WebGL kullanılamazsa görünen yedek zemin */
  background:
    radial-gradient(1200px 780px at 18% 8%,  #0B1430 0%, transparent 62%),
    radial-gradient(1000px 700px at 88% 92%, #071A2E 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
h1,h2{ font-weight:700; letter-spacing:-.03em; }
svg{ display:block; width:100%; height:100%; }

::selection{ background:rgba(50,170,226,.3); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================
   ARKA PLAN KATMANLARI
   ============================================================ */

/* Akışkan ışık alanı (WebGL). Zemindeki gradient, WebGL
   kullanılamadığında görünen yedek katmandır. */
#bg-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
}


/* ============================================================
   SAHNE — dikey/yatay ortalanmış tek ekran
   ============================================================ */

.stage{
  position:relative;
  z-index:3;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 1.6vh, 20px);
  padding:clamp(14px, 2.6vh, 30px) var(--gutter);
}

/* --- Dış kabuk: yalnızca ölçü ve giriş animasyonu taşır.
   Görsel çerçeve kaldırıldı; panel tek katman olarak durur. --- */
.shell{
  width:100%;
  max-width:1240px;
  border-radius:var(--r-core);
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  animation:shell-in 1.15s var(--ease-out) .1s forwards;
}

/* --- Panel --- */
.core{
  position:relative;
  border-radius:var(--r-core);
  /* hafif şeffaf: arka plan sezilir ama içeriği bozmaz */
  background:
    linear-gradient(158deg, rgba(9,14,30,.90), rgba(4,7,16,.93));
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  /* derinlik artık burada; dıştaki halka yok */
  box-shadow:0 40px 100px -30px rgba(2,6,18,.9);
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(20px, 3.2vw, 54px);
  padding:clamp(22px, 3.4vw, 50px);
}

.pane{ display:flex; flex-direction:column; min-width:0; }

.pane--lead{ justify-content:center; gap:clamp(12px, 1.9vh, 22px); }
.pane--side{ justify-content:center; gap:clamp(14px, 2vh, 22px); }

/* ============================================================
   MARKA
   ============================================================ */

.brand{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  transition:transform .55s var(--ease);
}
.brand:hover{ transform:translate3d(0,-1px,0); }

/* Kurumsal logo — koyu zemin için hazırlanmış açık varyant
   (logo-light.png; orijinal logo.png'den türetildi, cyan korunur,
   lacivert metin beyaza taşınır). */
.brand__logo{
  width:auto;
  height:clamp(30px, 3.1vw, 42px);
  display:block;
  filter:drop-shadow(0 5px 16px rgba(50,170,226,.24));
  transition:filter .55s var(--ease), transform .6s var(--ease);
  will-change:transform;
}
.brand:hover .brand__logo{
  filter:drop-shadow(0 7px 22px rgba(50,170,226,.42));
}

/* ============================================================
   BAŞLIK BLOĞU
   ============================================================ */

.headline{
  font-size:clamp(30px, 4.15vw, 60px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.headline b{
  font-weight:700;
  background:linear-gradient(103deg, var(--cyan) 8%, var(--cyan-soft) 55%, #BFE9FB 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* maske ile satır satır açılış */
.line{ display:block; overflow:hidden; }
.line > span{
  display:block;
  transform:translate3d(0,102%,0);
  animation:line-in 1.05s var(--ease-out) forwards;
}
.line:nth-child(1) > span{ animation-delay:.34s; }
.line:nth-child(2) > span{ animation-delay:.43s; }
.line:nth-child(3) > span{ animation-delay:.52s; }

.lede{
  max-width:46ch;
  font-size:clamp(13px, 1.02vw, 15.5px);
  line-height:1.65;
  color:var(--ink-soft);
}

/* ============================================================
   BUTONLAR
   ============================================================ */

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(2px, .6vh, 8px);
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn:active{ transform:scale(.975); }

/* birincil — cyan dolgulu, iç ikon kendi dairesinde */
.btn--primary{
  padding:11px 24px;
  color:#04121D;
  background:linear-gradient(140deg, var(--cyan-soft), var(--cyan) 62%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.5) inset,
    0 12px 30px -10px rgba(50,170,226,.6);
}
.btn--primary:hover{
  transform:translate3d(0,-2px,0);
  box-shadow:
    0 1px 1px rgba(255,255,255,.6) inset,
    0 18px 40px -10px rgba(50,170,226,.75);
}

/* ikincil — cam */
.btn--ghost{
  padding:10px 19px;
  color:var(--ink);
  background:var(--glass);
  border:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.btn--ghost:hover{
  transform:translate3d(0,-2px,0);
  background:var(--glass-lift);
  border-color:var(--hair-lift);
}
.btn__ico{
  width:15px; height:15px;
  flex:none;
  color:var(--cyan);
}

/* ============================================================
   HİZMET KARTLARI
   ============================================================ */

.services{
  display:grid;
  gap:clamp(6px, .9vh, 10px);
}

.svc{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:clamp(10px, 1.35vh, 15px) 15px;
  border-radius:var(--r-card);
  /* panel opak olduğu için kartlar biraz daha belirgin */
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
  overflow:hidden;
  cursor:default;
  transition:transform .58s var(--ease), background .58s var(--ease), border-color .58s var(--ease);
  will-change:transform;

  opacity:0;
  animation:card-in .95s var(--ease-out) forwards;
}
.svc:nth-child(1){ animation-delay:.60s; }
.svc:nth-child(2){ animation-delay:.68s; }
.svc:nth-child(3){ animation-delay:.76s; }

.svc:hover,
.svc:focus-visible{
  transform:translate3d(5px,0,0);
  background:var(--glass-lift);
  border-color:rgba(50,170,226,.3);
}

/* kartın sol kenarında beliren cyan ışık */
.svc__edge{
  position:absolute;
  left:0; top:18%; bottom:18%;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, transparent, var(--cyan), transparent);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .58s var(--ease);
}
.svc:hover .svc__edge,
.svc:focus-visible .svc__edge{ transform:scaleY(1); }

.svc__glyph{
  width:33px; height:33px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(150deg, rgba(50,170,226,.16), rgba(35,46,92,.3));
  border:1px solid rgba(50,170,226,.16);
  color:var(--cyan);
  transition:transform .58s var(--ease), border-color .58s var(--ease);
}
.svc__glyph svg{ width:17px; height:17px; }
.svc:hover .svc__glyph,
.svc:focus-visible .svc__glyph{
  transform:scale(1.07) rotate(-3deg);
  border-color:rgba(50,170,226,.42);
}

.svc__body h2{
  font-size:clamp(13px, 1.05vw, 15px);
  font-weight:700;
  letter-spacing:-.015em;
  margin-bottom:3px;
}
.svc__body p{
  font-size:clamp(11px, .84vw, 12.5px);
  line-height:1.5;
  color:var(--ink-mute);
}

/* ============================================================
   İLETİŞİM
   ============================================================ */

.contact{
  padding-top:clamp(10px, 1.6vh, 16px);
  border-top:1px solid rgba(255,255,255,.06);
  display:grid;
  gap:5px;

  opacity:0;
  animation:card-in .95s var(--ease-out) .94s forwards;
}

.contact__label{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:3px;
}

.contact__row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 11px;
  border-radius:12px;
  border:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.contact__row:hover{
  background:var(--glass);
  border-color:var(--hair);
  transform:translate3d(3px,0,0);
}

.contact__ico{
  width:16px; height:16px;
  flex:none;
  color:var(--cyan);
}
.contact__text{
  flex:1;
  min-width:0;
  font-size:clamp(12px, .92vw, 13.5px);
  font-weight:500;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .5s var(--ease);
}
.contact__row:hover .contact__text{ color:var(--ink); }

.contact__arrow{
  width:13px; height:13px;
  flex:none;
  color:var(--ink-mute);
  opacity:0;
  transform:translate3d(-4px,3px,0);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s var(--ease);
}
.contact__row:hover .contact__arrow{
  opacity:1;
  transform:translate3d(0,0,0);
  color:var(--cyan);
}

.social{
  display:flex;
  gap:7px;
  margin-top:7px;
  padding-left:11px;
}
.social__btn{
  width:33px; height:33px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--glass);
  border:1px solid var(--hair);
  color:var(--ink-soft);
  transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.social__btn svg{ width:15px; height:15px; }
.social__btn:hover{
  transform:translate3d(0,-3px,0);
  background:rgba(50,170,226,.13);
  border-color:rgba(50,170,226,.36);
  color:var(--cyan);
}

/* ============================================================
   ALT NOT
   ============================================================ */

.footnote{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:10.5px;
  letter-spacing:.055em;
  color:var(--ink-mute);
  opacity:0;
  animation:fade-in 1s var(--ease-out) 1.15s forwards;
}
.footnote__sep{
  width:3px; height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.5;
}

/* ============================================================
   ANİMASYONLAR — yalnızca transform + opacity
   ============================================================ */

@keyframes shell-in{
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes line-in{
  to{ transform:translate3d(0,0,0); }
}
@keyframes card-in{
  from{ opacity:0; transform:translate3d(0,16px,0); }
  to  { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes fade-in{
  to{ opacity:1; }
}

/* ============================================================
   DUYARLI DAVRANIŞ
   ============================================================ */

/* Tablet: tek sütun, hâlâ scrollsuz */
@media (max-width:900px){
  .core{
    grid-template-columns:1fr;
    gap:clamp(14px, 2.4vh, 24px);
  }
  .headline{ font-size:clamp(27px, 6.4vw, 40px); }
  .lede{ max-width:100%; }
  .svc__body p{ font-size:12px; }
}

/* Telefon: sıkı ölçek, sayfa yine tek ekran.
   Dar ekranda hizmet açıklamaları düşer — kart başlıkları zaten anlatıyor,
   böylece scroll'a gerek kalmadan her şey ekrana sığar. */
@media (max-width:640px){
  :root{ --r-core:18px; --r-card:13px; }

  .stage{
    padding:10px;
    padding-top:max(10px, env(safe-area-inset-top));
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    gap:8px;
  }
  .core{ padding:16px 15px; gap:13px; }

  .pane--lead{ gap:10px; }
  .pane--side{ gap:12px; }

  .brand__logo{ height:34px; }


  .headline{ font-size:clamp(26px, 8vw, 34px); line-height:1.06; }

  .lede{
    display:block;
    font-size:13px;
    line-height:1.55;
    max-width:100%;
  }

  /* CTA'lar başparmak erişimine yakın; dokunma hedefi 46px+ */
  .cta-row{ width:100%; gap:8px; margin-top:3px; }
  .btn{
    flex:1 1 100%;
    justify-content:center;
    font-size:14px;
    min-height:46px;
  }
  .btn--primary{ padding:0 22px; }
  .btn--ghost{ padding:0 18px; }

  /* Hizmetler: üç kompakt sütun — dikeyde yer kazanır,
     bilgi kaybolmaz, her biri tek bakışta okunur. */
  .services{
    grid-template-columns:repeat(3, 1fr);
    gap:7px;
  }
  .svc{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:11px 9px;
    gap:8px;
    border-radius:14px;
  }
  .svc__glyph{ width:30px; height:30px; border-radius:9px; }
  .svc__glyph svg{ width:16px; height:16px; }
  .svc__body h2{
    font-size:12px;
    line-height:1.25;
    margin-bottom:3px;
    letter-spacing:-.01em;
  }
  .svc__body p{
    display:block;
    font-size:10.5px;
    line-height:1.4;
  }
  /* dikey kartta sol kenar ışığı yerine üst kenar */
  .svc__edge{
    left:14%; right:14%;
    top:0; bottom:auto;
    width:auto; height:2px;
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
    transform:scaleX(0);
  }
  .svc:hover .svc__edge,
  .svc:focus-visible .svc__edge{ transform:scaleX(1); }
  .svc:hover, .svc:focus-visible{ transform:translate3d(0,-2px,0); }

  .contact{ padding-top:12px; gap:3px; }
  .contact__label{ font-size:9px; margin-bottom:2px; }
  /* iletişim satırları da rahat dokunulur olsun */
  .contact__row{ padding:9px 10px; gap:11px; min-height:44px; }
  .contact__text{ font-size:13px; }
  .contact__arrow{ opacity:.5; transform:none; }

  .social{ padding-left:0; margin-top:7px; gap:8px; }
  .social__btn{ width:44px; height:44px; border-radius:13px; }
  .social__btn svg{ width:18px; height:18px; }

  .footnote{ font-size:9.5px; gap:9px; }
}

/* Kısa masaüstü/dizüstü ekranlar */
@media (min-width:641px) and (max-height:700px){
  .svc__body p{ display:none; }
  .svc{ align-items:center; padding:8px 12px; }
  .lede{ display:none; }
  .headline{ font-size:clamp(23px, 3.4vw, 38px); }
  .core{ padding:16px 20px; }
  .stage{ padding-top:10px; padding-bottom:10px; }
}

/* Kısa telefon ekranı (ör. 360×640): kademeli sadeleşme —
   önce alt not, sonra kart açıklamaları düşer. */
@media (max-width:640px) and (max-height:730px){
  .footnote{ display:none; }
  .stage{ gap:0; padding:9px; }
  .core{ padding:14px 13px; gap:11px; }

  .pane--lead{ gap:9px; }
  .pane--side{ gap:11px; }

  .headline{ font-size:24px; }
  .lede{ font-size:12px; line-height:1.5; }

  .cta-row{ gap:7px; margin-top:1px; }
  .btn{ font-size:13.5px; min-height:44px; }

  .svc{ padding:9px 8px; gap:6px; }
  .svc__glyph{ width:27px; height:27px; }
  .svc__glyph svg{ width:14px; height:14px; }
  .svc__body h2{ font-size:11.5px; }
  .svc__body p{ display:none; }

  .contact{ padding-top:10px; gap:2px; }
  .contact__row{ padding:7px 9px; min-height:44px; }
  .social{ margin-top:5px; gap:7px; }
  .social__btn{ width:44px; height:44px; }
}

/* En dar/kısa telefonlar (ör. SE + Safari çubukları): açıklama düşer,
   dokunma hedefleri 44px altına inmez — sadece boşluklar daralır. */
@media (max-width:640px) and (max-height:660px){
  .lede{ display:none; }
  .headline{ font-size:22px; line-height:1.04; }

  .stage{ padding:7px; }
  .core{ padding:12px 12px; gap:9px; }
  .pane--lead{ gap:7px; }
  .pane--side{ gap:9px; }

  .brand__logo{ height:29px; }

  .cta-row{ gap:6px; }
  .btn{ min-height:42px; font-size:13px; }

  .svc{ padding:8px 7px; gap:5px; }
  .svc__glyph{ width:25px; height:25px; }
  .svc__glyph svg{ width:13px; height:13px; }
  .svc__body h2{ font-size:11px; }

  .contact{ padding-top:8px; }
  .contact__label{ margin-bottom:0; }
  .contact__row{ padding:6px 9px; min-height:40px; }
  .contact__text{ font-size:12.5px; }
  .social{ margin-top:4px; }
  .social__btn{ width:40px; height:40px; }
}

/* Yatay telefon: iki sütuna dön, dikeyde yer kazan */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .core{ grid-template-columns:1fr 1fr; gap:18px; padding:13px 16px; }
  .stage{ gap:6px; }

  .brand__logo{ height:26px; }

  .headline{ font-size:clamp(19px, 4.4vw, 26px); }

  /* butonlar yan yana kalsın, dikeyde iki satır yemesin */
  .cta-row{ flex-wrap:nowrap; }
  .btn{ flex:0 1 auto; font-size:12px; }
  .btn--primary{ padding:6px 16px; }
  .btn--ghost{ padding:7px 13px; }

  .svc{ padding:7px 10px; gap:9px; }
  .svc__glyph{ width:25px; height:25px; }
  .svc__glyph svg{ width:13px; height:13px; }
  .svc__body h2{ font-size:12px; }

  .contact{ padding-top:9px; }
  .contact__row{ padding:5px 8px; }
  .contact__text{ font-size:11.5px; }
  .social{ margin-top:3px; }
  .social__btn{ width:27px; height:27px; }

  .footnote{ display:none; }
}

/* Çok küçük telefonlar (≤380px) — en sıkı hâl */
@media (max-width:380px){
  .headline{ font-size:23px; }
  .lede{ font-size:11.5px; }
  .contact__text{ font-size:12px; }
  .core{ padding:14px 12px; gap:11px; }

  .services{ gap:5px; }
  .svc{ padding:9px 7px; gap:6px; }
  .svc__glyph{ width:26px; height:26px; border-radius:8px; }
  .svc__glyph svg{ width:14px; height:14px; }
  .svc__body h2{ font-size:11px; line-height:1.2; }
  .svc__body p{ display:none; }

  .btn{ font-size:13px; }
  .social__btn{ width:36px; height:36px; }
  .footnote{ display:none; }
}

/* Erişilebilirlik: hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .shell,.svc,.contact,.footnote{ opacity:1; transform:none; }
  .line > span{ transform:none; }
}