/* ============================================================================
   Ayali Studio — ortak stil (Organic tasarım sistemi üzerine kurulu)
   Derleme adımı yok; sayfalar bu dosyayı <link> ile çeker.
   ========================================================================== */
/* Yazı tipleri kendi sunucumuzdan gelir — Google Fonts'a istek yok, ziyaretçinin
   IP'si dışarı çıkmaz. Dosyalar assets/fonts/ altında; ikisi de SIL/OFL lisanslı.
   latin-ext yalnızca ğ, ş, İ gibi harfler geçtiğinde indirilir. */
@font-face{
  font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/caprasimo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/caprasimo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --color-bg:#f5ead8;
  --color-surface:#ebddc5;
  --color-text:#201e1d;
  --color-accent:#c67139;
  --color-accent-2:#7a8a5e;
  --color-divider:color-mix(in srgb,#201e1d 16%,transparent);

  --color-neutral-100:#f9f4ed; --color-neutral-200:#eee7db; --color-neutral-300:#dcd3c4;
  --color-neutral-400:#c0b6a5; --color-neutral-500:#a19786; --color-neutral-600:#82796a;
  --color-neutral-700:#645c50; --color-neutral-800:#474238; --color-neutral-900:#2e2b25;

  --color-accent-200:#ffe1d0; --color-accent-300:#ffc6a5; --color-accent-600:#b2622d;
  --color-accent-700:#8c491a; --color-accent-800:#643312;

  --color-accent-2-100:#f0fae1; --color-accent-2-200:#e1eecc; --color-accent-2-300:#ccdbb2;
  --color-accent-2-700:#56633f; --color-accent-2-800:#3d472b;

  --font-heading:"Caprasimo",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;

  --shadow-sm:0 1px 2px color-mix(in srgb,#2e2b25 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2e2b25 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2e2b25 22%,transparent);

  --shell:1180px;
  --gutter:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.1;letter-spacing:-.015em;margin:0}
a{color:var(--color-accent-700);text-underline-offset:3px}
a:hover{color:var(--color-accent-600)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:var(--color-accent-200)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.shell--narrow{max-width:1080px}

/* Dil anahtarı: yalnızca gizleme kuralı yazılır. Görünen tarafa display
   verilmez — verilseydi .shots gibi kendi display'i olan kutular ezilirdi.
   data-lang henüz yokken (JS çalışmadan) Türkçe görünür. */
html:not([data-lang="en"]) .en{display:none}
html[data-lang="en"] .tr{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Başlık çubuğu ------------------------------------------------------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0 0}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{flex:none;color:var(--color-accent)}
.brand b{font-family:var(--font-heading);font-weight:400;font-size:19px}
.langswitch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--color-surface)}
.langswitch button{
  border:0;background:transparent;cursor:pointer;font-family:var(--font-body);
  font-size:13.5px;font-weight:700;letter-spacing:.02em;padding:8px 17px;border-radius:999px;
  color:var(--color-neutral-700);transition:background .18s ease,color .18s ease;
}
.langswitch button:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.langswitch button.active{background:var(--color-accent);color:var(--color-bg)}
.langswitch button.active:hover{background:var(--color-accent-600)}

/* --- Editoryal parçalar --------------------------------------------------- */
.kicker{margin:0 0 22px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-700)}
.display{max-width:24ch;font-size:clamp(40px,6.6vw,76px);line-height:1.03;letter-spacing:-.02em;text-wrap:pretty}
.display em{font-style:normal;color:var(--color-accent)}
.lede{margin:30px 0 0;max-width:54ch;font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--color-neutral-700)}

.hero{position:relative;padding:clamp(56px,10vw,104px) 0 clamp(30px,5vw,54px)}
.hero > *{position:relative}
.blob{border-radius:50%;pointer-events:none}
.hero > .blob,.apphero > .blob{position:absolute}
.blob--1{right:-90px;top:40px;width:min(38vw,380px);aspect-ratio:1;background:var(--color-accent-200);opacity:.55}
.blob--2{right:150px;top:250px;width:min(16vw,150px);aspect-ratio:1;background:var(--color-accent-2-200);opacity:.6}

/* --- Uygulama kartları (ana sayfa) --------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(16px,2.2vw,26px);padding:clamp(24px,4vw,44px) 0 clamp(48px,7vw,80px)}
.appcard{position:relative;overflow:hidden;border-radius:32px;background:var(--color-neutral-100);box-shadow:var(--shadow-sm);padding:clamp(26px,3vw,34px)}
.appcard > *{position:relative}
.motif{position:absolute;pointer-events:none;right:-34px;bottom:-42px;width:205px}
.apphead{display:flex;align-items:center;gap:16px}
.appicon{width:72px;height:72px;border-radius:20px;flex:none;box-shadow:var(--shadow-md)}
.no{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-600)}
.no--live{color:var(--color-accent-2-700)}
.appcard h2{font-size:clamp(28px,3.4vw,36px)}
.tagline{margin:20px 0 0;font-size:19px;line-height:1.4;color:var(--color-accent-700);font-weight:600;max-width:26ch}
.desc{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--color-neutral-700);max-width:40ch}
.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}

/* --- Rozetler ve düğmeler ------------------------------------------------- */
.badge-store{
  display:inline-flex;align-items:center;gap:11px;padding:0 20px;height:50px;
  border-radius:14px;background:#201e1d;color:#f5ead8;text-decoration:none;
  transition:background .18s ease;
}
.badge-store:hover{background:#2e2b25;color:#f5ead8}
.badge-store svg{flex:none}
.badge-store span{display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.badge-store .top{font-size:10.5px;letter-spacing:.03em}
.badge-store .bottom{font-size:18px;font-weight:700}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;
  border:1.5px solid var(--color-neutral-400);color:var(--color-neutral-700);font-weight:700;font-size:14px;
}
.more{font-size:16px;font-weight:700;text-decoration:none;color:var(--color-accent-700);display:inline-flex;align-items:center;gap:7px}
.more:hover{text-decoration:underline}
.back{font-size:15.5px;font-weight:700;text-decoration:none;color:var(--color-neutral-700)}
.btn-mail{
  flex:none;display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;
  border-radius:999px;background:var(--color-accent);color:var(--color-bg);
  font-family:var(--font-heading);font-size:17px;text-decoration:none;transition:background .18s ease;
}
.btn-mail:hover{background:var(--color-accent-600);color:var(--color-bg)}
.btn-mail:active{background:var(--color-accent-700)}

/* --- Koyu adaçayı bandı --------------------------------------------------- */
.band-dark{background:var(--color-accent-2-800);color:var(--color-accent-2-100)}
.band-dark .inner{max-width:var(--shell);margin:0 auto;padding:clamp(46px,7.5vw,92px) var(--gutter)}
.band-dark .kicker{color:var(--color-accent-2-300);margin-bottom:34px}
.band-dark a{color:var(--color-accent-300)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3.4vw,48px)}
.values h3{margin:0 0 12px;font-size:26px}
.values p{margin:0;font-size:16px;line-height:1.62;color:var(--color-accent-2-200)}
.notes{display:grid;gap:clamp(22px,3vw,34px)}
.notes > div{max-width:74ch}
.notes h3{margin:0 0 10px;font-size:24px}
.notes p{margin:0;font-size:16px;line-height:1.65;color:var(--color-accent-2-200)}

/* --- Destek şeridi -------------------------------------------------------- */
.support{
  display:flex;align-items:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;
  border-radius:32px;background:var(--color-surface);padding:clamp(28px,4vw,44px);
  margin:clamp(48px,7vw,84px) 0;
}
.support h3{margin:0 0 10px;font-size:clamp(26px,3.4vw,34px)}
.support p{margin:0;font-size:16.5px;line-height:1.6;color:var(--color-neutral-700);max-width:46ch}
.support > div{flex:1 1 320px;min-width:0}

/* --- Uygulama sayfası ----------------------------------------------------- */
.apphero{position:relative;padding:clamp(44px,7vw,84px) 0 clamp(28px,4vw,44px)}
.apphero > *{position:relative}
.apphero .row{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap}
.apphero__icon{width:112px;height:112px;border-radius:28px;flex:none;box-shadow:var(--shadow-lg)}
.apphero .status{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-2-700)}
.apphero h1{font-size:clamp(38px,6vw,64px);line-height:1.02;letter-spacing:-.02em}
.apphero .tagline{margin:12px 0 0;font-size:clamp(19px,2.4vw,24px);line-height:1.35}
.apphero .lede{margin:clamp(28px,4vw,42px) 0 0;max-width:56ch}
.apphero .blob{right:-70px;top:0;width:min(34vw,320px);aspect-ratio:1;opacity:.5}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,22px);padding:clamp(16px,3vw,32px) 0}
.shots img{width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:26px;background:var(--color-surface);box-shadow:var(--shadow-md);display:block}

.features{padding:clamp(40px,6vw,74px) 0}
.features .kicker{margin-bottom:clamp(22px,3vw,34px)}
.features .list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,22px)}
.features .item{border-radius:28px;background:var(--color-neutral-100);box-shadow:var(--shadow-sm);padding:clamp(22px,2.6vw,30px)}
.features h3{margin:0 0 10px;font-size:22px}
.features p{margin:0;font-size:15.5px;line-height:1.62;color:var(--color-neutral-700)}

/* --- Alt bilgi ------------------------------------------------------------ */
.site-footer{padding:26px 0 64px}
.site-footer .inner{
  border-top:1px solid var(--color-divider);padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--color-neutral-700);
}
.site-footer .links{display:flex;gap:16px;flex-wrap:wrap}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:inherit}

/* --- Scroll animasyonu ---------------------------------------------------- */
[data-reveal].pending{opacity:0;transform:translateY(20px)}
[data-reveal]{transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].pending{opacity:1!important;transform:none!important;transition:none!important}
}

@media (max-width:640px){
  .appicon{width:60px;height:60px;border-radius:16px}
  .apphero__icon{width:88px;height:88px;border-radius:22px}
}