/* THINKIPLAY — design system of ThinkiPlay_Corporate_Profile_2026.pdf
   Colours sampled from the PDF: navy #1B234F, purple #6A3FA0, turquoise #5EC3C7,
   mint #E8F5F5, lavender-grey #EDF1F6. Typeface Poppins. Two-tone headings (navy + purple). */
:root {
  --beyaz: #FFFFFF;
  --zemin: #F5F6FA;      /* section background */
  --lavanta: #EDF1F6;    /* panels, icon tiles, brand panel */
  --lavanta2: #EEEFF7;
  --mint: #E8F5F5;
  --lacivert: #1B234F;   /* headings and main text */
  --gri: #4A5068;        /* descriptions */
  --gri-acik: #6B7084;   /* small notes */
  --mor: #6A3FA0;        /* accent words, buttons, eyebrow numbers */
  --mor-koyu: #56318A;
  --turkuaz: #5EC3C7;    /* lines, "available" pill, numbers */
  --turkuaz-koyu: #2E8F93; /* turquoise text on light backgrounds */
  --cizgi: #E4E7EF;
  --genislik: 1200px;
  --yan: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lacivert);
  background: var(--beyaz);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mor); }
a:focus-visible, .dugme:focus-visible { outline: 3px solid var(--turkuaz); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 16ch; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 600; }
p { color: var(--gri); }

.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 var(--yan); }
.atla { position: absolute; left: -9999px; }
.atla:focus { left: var(--yan); top: 12px; z-index: 10; background: var(--beyaz); padding: 8px 12px; }

/* Header — soft white band. On wide screens the (transparent) logo sits on the band's lower edge:
   its top half on #F7F7F7, its bottom half on the white page below. No border line, so the
   colour change itself is the edge and nothing shows through the logo's gaps. */
.ust { background: var(--zemin); position: relative; z-index: 2; }
.ust .kap { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 24px; height: 84px; }
/* App-icon tile: white, rounded corners, a soft silhouette shadow; centred on the band's edge */
.logo { position: absolute; left: var(--yan); top: calc(84px - 70px); width: 140px; height: 140px;
  display: grid; place-items: center; background: var(--beyaz); border-radius: 32px;
  box-shadow: 0 10px 28px rgba(25, 34, 77, 0.12), 0 2px 6px rgba(25, 34, 77, 0.08); }
.logo img { height: 108px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; list-style: none; }
.menu a { color: var(--lacivert); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.menu a:hover { color: var(--mor); }
.dil { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
.dil a { color: var(--gri); text-decoration: none; padding: 4px 2px; }
.dil a:hover { color: var(--mor); }
.dil [aria-current] { color: var(--lacivert); border-bottom: 2px solid var(--turkuaz); }
.menu .bolum-baglanti a[aria-current="page"] { color: var(--mor); box-shadow: inset 0 -2px 0 var(--turkuaz); padding-bottom: 4px; }
.dil span { color: var(--cizgi); margin: 0 4px; }

/* Sections */
.bolum { padding: 96px 0; }
.bolum.yumusak { background: var(--zemin); }
.etiket { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gri); margin-bottom: 16px; }
.etiket::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--turkuaz); }
.giris { max-width: 62ch; margin-top: 16px; font-size: 1.08rem; }
.giris.ilk { margin-top: 0; }
.ust-bolum { padding-top: 112px; }
.ust-bolum h1 { max-width: 22ch; }
/* Not yet available (link unknown / page not written). Must not remain when going live. */
.pasif { opacity: 0.55; cursor: not-allowed; }
.pasif small { font-weight: 400; }

/* Hero */
.kahraman { padding: 112px 0 104px; }
.kahraman p { max-width: 58ch; margin-top: 20px; font-size: 1.15rem; }
.kahraman .etiket { margin-top: 0; }
.slogan { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--lacivert); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.dugme { display: inline-block; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 0.98rem;
  text-decoration: none; border: 2px solid var(--mor); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.dugme.ana { background: var(--mor); color: var(--beyaz); }
.dugme.ana:hover { background: var(--mor-koyu); border-color: var(--mor-koyu); }
.dugme.ikincil { background: transparent; color: var(--mor); }
.dugme.ikincil:hover { background: var(--mor); color: var(--beyaz); }
/* Two-column grid */
.iki { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }

/* Product cards — home (3 featured) and Work (all six). The whole card is one link. */
.genis-baslik { max-width: none; }
.one-cikan, .kartlar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.one-cikan { grid-template-columns: repeat(4, 1fr); }
.one-cikan .telefonlu img { width: 54%; }
.one-cikan .urun-govde { padding: 16px 10px 10px; }
.urun-kart a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.urun-kart a:hover { border-color: #D8CDE0; box-shadow: 0 6px 18px rgba(25, 34, 77, 0.07); }
.urun-govde { display: flex; flex-direction: column; flex: 1; padding: 18px 14px 14px; }
.urun-ad { font-size: 1.2rem; font-weight: 700; color: var(--lacivert); }
.urun-kisa, .urun-acik { margin-top: 6px; color: var(--gri); font-size: 0.97rem; flex: 1; }
.incele { margin-top: 18px; align-self: flex-start; font-weight: 600; font-size: 0.95rem; color: var(--mor);
  border-bottom: 2px solid var(--mor); padding-bottom: 2px; }
.urun-kart a:hover .incele { color: var(--mor-koyu); border-color: var(--mor-koyu); }

/* Empty image templates (until real screenshots arrive) */
.kapak, .ekran { display: block; width: 100%; border-radius: 8px; object-fit: cover; }
.kapak { aspect-ratio: 16 / 10; }
.ekran { aspect-ratio: 16 / 10; }
.yer-tutucu { position: relative; overflow: hidden; display: grid; place-items: center; }
.yer-tutucu span { position: relative; font-size: 0.85rem; color: var(--gri-acik); }
.yer-tutucu.mor { background: #F1ECF5; }
.yer-tutucu.turkuaz { background: #EDF7F7; }
.yer-tutucu::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; bottom: -40%; }
.yer-tutucu.mor::before { background: #E8DFEE; }
.yer-tutucu.turkuaz::before { background: #DDF1F1; }

/* Landscape cover (desktop software screenshot) */
.yatay-kapak { overflow: hidden; background: #EEF0F5; }
.yatay-kapak img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.yatay-gorsel { margin-top: 40px; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(25, 34, 77, 0.10); }
.yatay-gorsel img { width: 100%; }

/* "Also from Thinkiplay" row */
.diger-urunler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.kisa-bolum .diger-urunler { margin-top: 0; border-top: 0; padding-top: 0; }
.diger-etiket { font-size: 0.92rem; color: var(--gri); }
.diger-urunler ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; }
.diger-urunler li + li::before { content: "/"; color: var(--cizgi); margin: 0 18px; }
.diger-urunler ul a { color: var(--lacivert); font-weight: 600; text-decoration: none; }
.diger-urunler ul a:hover { color: var(--mor); }
.tumu { margin-left: auto; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.kisa-bolum { padding: 48px 0; }

/* Card cover with a real phone screenshot: the screen stands in a tinted frame */
.telefonlu { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 18px; }
.telefonlu.mor { background: #F1ECF5; }
.telefonlu.turkuaz { background: #EDF7F7; }
.telefonlu img { width: 46%; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 8px 22px rgba(25, 34, 77, 0.16); }

/* Rich product page */
.urun-ust { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.urun-slogan { margin-top: 14px; font-size: 1.2rem; font-weight: 600; color: var(--lacivert); max-width: 34ch; }
.bilgi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; margin-top: 28px; max-width: 640px; }
.bilgi div { border-top: 2px solid var(--turkuaz); padding-top: 10px; }
.bilgi dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gri); }
.bilgi dd { margin-top: 4px; font-size: 0.95rem; color: var(--lacivert); }
.telefon-cerceve { border-radius: 28px; padding: 28px; display: flex; justify-content: center; }
.telefon-cerceve.mor { background: #F1ECF5; }
.telefon-cerceve.turkuaz { background: #EDF7F7; }
.telefon-cerceve img { width: 100%; max-width: 300px; border-radius: 26px; border: 6px solid var(--lacivert); box-shadow: 0 16px 36px rgba(25, 34, 77, 0.18); }
.galeri { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; margin-top: 36px; }
.galeri img { width: 100%; border-radius: 16px; border: 1px solid var(--cizgi); box-shadow: 0 6px 18px rgba(25, 34, 77, 0.08); }
.galeri figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--gri); line-height: 1.5; }
.uzun .giris { max-width: 68ch; }
.ilkeler h3 { font-size: 1.1rem; font-weight: 600; margin-top: 12px; }
.maddeler { list-style: none; display: grid; gap: 16px; }
.maddeler li { color: var(--gri); padding-left: 18px; position: relative; max-width: 68ch; }
.maddeler li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--turkuaz); }
.maddeler strong { color: var(--lacivert); font-weight: 600; }
.kapanis { background: var(--lacivert); }
.kapanis h2 { color: var(--beyaz); max-width: 30ch; }
.kapanis .dugme.ana { background: var(--beyaz); color: var(--lacivert); border-color: var(--beyaz); }
.kapanis .dugme.ana:hover { background: var(--zemin); border-color: var(--zemin); }
.kapanis .dugme.ikincil { color: var(--beyaz); border-color: var(--beyaz); }
.kapanis .dugme.ikincil:hover { background: var(--beyaz); color: var(--lacivert); }

/* Product page */
.iz { font-size: 0.9rem; color: var(--gri); margin-bottom: 20px; }
.iz a { color: var(--gri); }
.iz a:hover { color: var(--mor); }
.iz span[aria-current] { color: var(--lacivert); font-weight: 600; }
.urun-kapak { margin-top: 40px; padding: 10px; border: 1px solid var(--cizgi); border-radius: 14px; }
.urun-kapak .kapak { aspect-ratio: 16 / 7; }
.ekranlar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }

/* Approach: six principles */
.ilkeler { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin-top: 56px; }
.ilkeler li { border-top: 1px solid var(--cizgi); padding-top: 24px; }
.ilkeler h2 { font-size: 1.15rem; font-weight: 600; margin-top: 12px; }
.ilkeler p { margin-top: 8px; font-size: 0.97rem; }
.no { font-weight: 700; font-size: 0.95rem; color: var(--lacivert); }
.no::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--turkuaz); margin-top: 8px; }

/* Team */
.ekip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.kisi { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 24px; }
.kisi .rol { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gri); padding-bottom: 6px; border-bottom: 2px solid var(--turkuaz); margin-bottom: 16px; min-height: 1.6em; }
.kisi .rol.bos { border-bottom-color: transparent; }
.kisi h2 { font-size: 1.1rem; font-weight: 700; }
.kisi p { font-size: 0.95rem; margin-top: 4px; }

/* Careers */
.kutu { background: var(--zemin); border-radius: 12px; padding: 32px; }
.kutu h2 { font-size: 1.3rem; }
.kutu p { margin-top: 10px; }

/* Contact */
.iletisim { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.iletisim > li { border-top: 3px solid var(--turkuaz); padding-top: 20px; }
.iletisim h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gri); margin-bottom: 8px; font-weight: 600; }
.iletisim a, .iletisim address { font-style: normal; color: var(--lacivert); font-weight: 600; }
.iletisim a:hover { color: var(--mor); }
.iletisim .kucuk { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: var(--mor); }
/* Sign-up window ("Get notified at launch"). Opened by #haber-ver in the address (CSS :target, no script). */
.pencere { display: none; position: fixed; inset: 0; z-index: 50; place-items: center; padding: 16px; }
.pencere:target { display: grid; }
.pencere-perde { position: absolute; inset: 0; background: rgba(25, 34, 77, 0.45); }
.pencere-kutu { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--beyaz); border-radius: 16px; padding: 32px 28px 28px; box-shadow: 0 24px 60px rgba(25, 34, 77, 0.25); }
.pencere-kutu h2 { font-size: 1.35rem; padding-right: 28px; }
.pencere-kutu > p { margin-top: 10px; }
.pencere-kapat { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1; color: var(--gri); text-decoration: none; border-radius: 8px; }
.pencere-kapat:hover { color: var(--lacivert); background: var(--zemin); }
.pencere-kutu .dugme { margin-top: 20px; }
.bildirim-form { display: grid; gap: 10px; margin-top: 20px; }
.bildirim-form label { font-size: 0.9rem; font-weight: 600; color: var(--lacivert); }
.bildirim-form input[type="email"] { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--cizgi);
  border-radius: 10px; color: var(--lacivert); background: var(--beyaz); }
.bildirim-form input[type="email"]:focus { outline: 3px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
.bildirim-form .onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--gri); margin-top: 4px; }
.bildirim-form .onay input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--mor); flex: 0 0 auto; }
.bildirim-form .not { font-size: 0.85rem; color: var(--gri-acik); }
.bildirim-form .dugme { justify-self: start; margin-top: 6px; cursor: pointer; font-family: inherit; }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Tech Entrepreneurship Badge (home) */
.rozet { align-items: center; }
.rozet .giris { margin-top: 14px; }
.rozet-gorsel img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--beyaz);
  box-shadow: 0 8px 40px rgba(25, 34, 77, 0.08); }

/* Privacy policy */
.gizlilik h1 { max-width: none; }
.gizlilik .guncelleme { margin-top: 10px; font-size: 0.9rem; color: var(--gri-acik); }
.gizlilik-bolum { margin-top: 40px; max-width: 72ch; }
.gizlilik-bolum h2 { font-size: 1.25rem; }
.gizlilik-bolum p { margin-top: 10px; }
.gizlilik-bolum strong { color: var(--lacivert); font-weight: 600; }
.alt a { color: var(--gri-acik); }
.alt a:hover { color: var(--mor); }

/* Social icons (footer + contact). Links may be '#' until the real addresses are known. */
.sosyal-ikonlar { list-style: none; display: flex; align-items: center; gap: 10px; }
.sosyal-ikonlar a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--lacivert); border: 1px solid var(--cizgi); background: var(--beyaz); transition: color .15s ease, border-color .15s ease; }
.sosyal-ikonlar a:hover { color: var(--mor); border-color: var(--mor); }
.sosyal-ikonlar svg { width: 18px; height: 18px; }
.sosyal-ikonlar.buyuk { margin-top: 14px; gap: 12px; }
.sosyal-ikonlar.buyuk a { width: 44px; height: 44px; }
.sosyal-ikonlar.buyuk svg { width: 22px; height: 22px; }
.dugme-ikonlu { display: inline-flex; align-items: center; gap: 10px; }
.dugme-ikonlu svg { width: 18px; height: 18px; }

/* Footer */
.alt { padding: 40px 0; border-top: 1px solid var(--cizgi); font-size: 0.88rem; }
.alt .kap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.alt p { color: var(--gri-acik); }

/* Corporate profile blocks */
.rakamlar { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 160px)); gap: 24px; margin-top: 56px; }
.rakamlar li { border-top: 3px solid var(--turkuaz); padding-top: 12px; }
.rakamlar strong { font-variant-numeric: tabular-nums; min-width: 2ch; display: inline-block; } .rakamlar strong { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--lacivert); }
.rakamlar span { display: block; margin-top: 4px; font-size: 0.92rem; color: var(--gri); }
.uclu { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.uclu.dortlu { grid-template-columns: repeat(4, 1fr); }
.uclu li { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 24px; }
.yumusak .uclu li { border-color: transparent; }
.uclu h3 { font-size: 1.08rem; font-weight: 700; }
.uclu h3::before { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--turkuaz); margin-bottom: 14px; }
.uclu p { margin-top: 8px; font-size: 0.96rem; }
.uclu + .dugmeler { margin-top: 32px; }
.destek { list-style: none; display: grid; gap: 16px; }
.destek li { background: var(--beyaz); border-radius: 12px; padding: 22px 24px; }
.destek .ust { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gri); }
.destek h3 { font-size: 1.1rem; font-weight: 700; margin-top: 6px; }
.destek p { margin-top: 6px; font-size: 0.95rem; }
.rozet .destek + .rozet-gorsel, .destek { margin-top: 40px; }
.durum { align-self: flex-start; display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.durum.yayinda { background: var(--turkuaz); color: #fff; }
.durum.pilot { background: var(--mor); color: #fff; }
.tur { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gri-acik); margin-top: 4px; }
.urun-etiketler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.urun-etiketler .durum { margin-bottom: 0; }
.urun-etiketler .tur { margin-top: 0; }
.bilim { margin-top: 16px; font-size: 0.95rem; color: var(--lacivert); max-width: 62ch; }
.bilim span { display: inline-block; margin-right: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mor-koyu); }
.kategori h2 { font-size: 1.6rem; }
.kategori .kartlar { margin-top: 28px; }
.diger-alan { font-size: 0.85rem; color: var(--gri-acik); margin-left: 4px; }
.kisi.proje { background: var(--zemin); border-color: transparent; }
.kisa-maddeler { margin-top: 20px; gap: 8px; }

/* Narrow screens */
@media (max-width: 1000px) {
  .uclu, .uclu.dortlu { grid-template-columns: repeat(2, 1fr); }
  .kartlar, .one-cikan, .ilkeler, .ekranlar { grid-template-columns: repeat(2, 1fr); }
  .galeri { grid-template-columns: repeat(3, 1fr); }
  .ekip { grid-template-columns: repeat(3, 1fr); }
  .menu { gap: 20px; }
}
@media (max-width: 900px) {
  .iki, .urun-ust { grid-template-columns: 1fr; gap: 32px; }
  .iletisim { grid-template-columns: 1fr; }
  .ekip { grid-template-columns: repeat(2, 1fr); }
  /* Two-row header: logo on top, menu wraps underneath — no JavaScript needed */
  /* Narrow: the menu needs the space, so the logo returns into the band at normal size */
  .ust .kap { flex-wrap: wrap; justify-content: space-between; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .logo { position: static; width: 76px; height: 76px; border-radius: 18px; }
  .logo img { height: 58px; }
  .ust nav { width: 100%; }
  .menu { flex-wrap: wrap; gap: 8px 18px; }
}
@media (max-width: 600px) {
  :root { --yan: 16px; }
  .logo { width: 64px; height: 64px; border-radius: 16px; }
  .logo img { height: 48px; }
  .bolum { padding: 64px 0; }
  .ust-bolum { padding-top: 56px; }
  .kahraman { padding: 64px 0 56px; }
  .kartlar, .one-cikan, .ilkeler, .ekranlar, .ekip, .uclu, .uclu.dortlu { grid-template-columns: 1fr; }
  .rakamlar { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
  .tumu { margin-left: 0; }
  .galeri { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .bilgi { grid-template-columns: 1fr; }
  .urun-kapak .kapak { aspect-ratio: 16 / 10; }
}

/* ===== Corporate Profile 2026 design layer (overrides above) ===== */
body { font-size: 16px; line-height: 1.7; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; }
h1.genis, .ust-bolum h1.genis { max-width: 24ch; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); max-width: 26ch; }
.vurgu { color: var(--mor); }
strong { color: var(--lacivert); font-weight: 600; }
.giris strong { font-weight: 700; }

/* numbered eyebrow: "01  MEET THINKIPLAY" */
.etiket { color: var(--lacivert); letter-spacing: 0.16em; font-size: 0.74rem; gap: 14px; margin-bottom: 18px; }
.etiket::before { width: 28px; height: 2px; }
.etiket.numarali::before { display: none; }
.no-e { color: var(--mor); font-weight: 700; letter-spacing: 0.06em; }

.dugme { border-radius: 999px; padding: 13px 26px; }

/* image panel with a large rounded top-left corner */
.panel-gorsel { margin: 0; overflow: hidden; border-radius: 120px 28px 28px 28px; background: var(--lavanta); }
.panel-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.panel-gorsel.dikey { aspect-ratio: 4 / 5; }
.panel-gorsel.kare { aspect-ratio: 1 / 1; border-radius: 140px 0 0 0; }
.panel-gorsel.serit { aspect-ratio: 16 / 5; border-radius: 32px; margin-top: 48px; }
.panel-gorsel.odul { aspect-ratio: 16 / 11; border-radius: 28px; margin-top: 28px; }
.yari { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }

/* hero */
.kahraman { padding: 72px 0 96px; }
.kahraman-izgara { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: center; }
.kahraman h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.02; max-width: 9ch; }
.alt-baslik { margin-top: 28px; padding-left: 18px; border-left: 3px solid var(--turkuaz); font-size: 1.15rem; font-weight: 600;
  color: var(--lacivert); line-height: 1.45; }
.alt-baslik span { color: var(--mor); }
.kahraman .dugmeler { margin-top: 32px; }
.destekleyen { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.destekleyen > span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lacivert); }
.logolar { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.logolar img { height: 34px; width: auto; }
.logolar li:first-child img { height: 44px; }

/* stats: purple numbers, last one turquoise */
.rakamlar { grid-template-columns: repeat(4, auto); justify-content: start; gap: 40px; margin-top: 40px; }
.rakamlar li { border-top: 0; padding-top: 0; }
.rakamlar strong { font-variant-numeric: tabular-nums; min-width: 2ch; display: inline-block; } .rakamlar strong { font-size: 2.3rem; color: var(--mor); }
.rakamlar li:last-child strong { color: var(--turkuaz); }
.vurgu-cumle { margin-top: 20px; font-size: 1.3rem; font-weight: 700; color: var(--mor); }

/* icon lists */
.ikonlu { list-style: none; display: grid; gap: 28px; margin-top: 36px; }
.ikonlu .ikon { display: inline-grid; place-items: center; color: var(--mor); }
.ikonlu svg { width: 26px; height: 26px; }
.ikonlu h3 { font-size: 1.05rem; font-weight: 600; }
.ikonlu p { margin-top: 6px; font-size: 0.93rem; }
.ikonlu.yatay { grid-template-columns: repeat(3, 1fr); }
.ikonlu.yatay li, .ikonlu.dortlu li { display: flex; flex-direction: column; gap: 14px; }
.ikonlu.dortlu { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
.ikonlu.kutulu li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.ikonlu.kutulu .ikon { width: 52px; height: 52px; border-radius: 12px; background: var(--lavanta); }
.baslik-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }

/* category panels (home) */
.kategori-panolar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.kat-pano { display: flex; flex-direction: column; border-radius: 22px; padding: 28px 22px 22px; }
.kat-pano.mint { background: var(--mint); }
.kat-pano.lavanta { background: var(--lavanta); }
.kat-pano.lavanta2 { background: var(--lavanta2); }
.kat-ad { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mor); }
.kat-pano.mint .kat-ad { color: var(--turkuaz-koyu); }
.kat-pano.lavanta2 .kat-ad { color: var(--lacivert); }
.kat-acik { margin-top: 10px; color: var(--lacivert); font-size: 1rem; }
.urun-satirlar { list-style: none; display: grid; gap: 12px; margin: 22px 0 24px; }
.urun-satirlar a { display: flex; gap: 14px; align-items: center; background: var(--beyaz); border-radius: 14px; padding: 12px;
  text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.urun-satirlar a:hover { box-shadow: 0 8px 22px rgba(27, 35, 79, 0.09); }
.urun-satirlar img { width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto; }
.urun-satirlar strong { display: block; font-size: 1.05rem; font-weight: 700; }
.urun-satirlar .alan { display: block; font-size: 0.85rem; color: var(--gri); }
.etiket-hap { display: inline-block; margin-top: 4px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lacivert); border: 1px solid #D5D9E6; border-radius: 999px; padding: 1px 8px; }
.kat-bilim { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(27, 35, 79, 0.12); font-size: 0.88rem; color: var(--gri); }
.kat-bilim span, .bilim-kutu span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--turkuaz-koyu); margin-right: 6px; }
.kat-pano.lavanta .kat-bilim span { color: var(--mor); }
.kat-pano.lavanta2 .kat-bilim span { color: var(--lacivert); }

/* backed & recognised */
.destek-izgara { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.ust-not { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mor); }
.ust-not.turkuaz { color: var(--turkuaz-koyu); }
.destek-sol h2 { margin-top: 8px; }
.buyuk-metin { margin-top: 20px; font-size: 1.15rem; color: var(--lacivert); }
.destek-sol > p:not(.etiket):not(.ust-not):not(.buyuk-metin) { margin-top: 14px; font-size: 0.95rem; }
.buyuk-h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.tanima { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; margin-top: 26px; }
.tanima > img, .logo-kutu { width: 100%; border-radius: 14px; background: var(--beyaz); box-shadow: 0 8px 26px rgba(27, 35, 79, 0.10); }
.logo-kutu { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.logo-kutu img { width: 62%; }
.tanima h4 { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.tanima p:last-child { margin-top: 6px; font-size: 0.92rem; }
.kutu-serit { background: var(--beyaz); border-radius: 16px; padding: 18px 22px; border-top: 0; margin-top: 30px; }

/* work: product cards like PDF pages 8–9 */
.profil-kartlar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.profil-kartlar a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.kart-kapak { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; }
.profil-kartlar a:hover .kart-kapak { box-shadow: 0 12px 30px rgba(27, 35, 79, 0.15); }
.kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.kart-ust .urun-ad { font-size: 1.35rem; }
.kart-ust .durum { margin-bottom: 0; }
.profil-kartlar .tur { color: var(--mor); margin-top: 6px; font-size: 0.7rem; letter-spacing: 0.1em; }
.profil-kartlar .urun-acik { flex: 0 0 auto; margin-top: 10px; }
.tik-liste { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.tik-liste li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 0.93rem; color: var(--lacivert); }
.tik-liste svg { width: 18px; height: 18px; margin-top: 3px; color: var(--turkuaz); }
.kategori:nth-of-type(odd) .tik-liste svg { color: var(--turkuaz); }
.bilim-kutu { margin-top: 18px; background: var(--zemin); border-radius: 12px; padding: 12px 14px; font-size: 0.86rem; }
.yumusak .bilim-kutu { background: var(--beyaz); }
.profil-kartlar .incele { margin-top: auto; padding-top: 18px; border-bottom: 0; }
.profil-kartlar .bilim-kutu + .incele { margin-top: 18px; }
.durum { padding: 4px 12px; font-size: 0.66rem; letter-spacing: 0.12em; }
.bilim span { color: var(--turkuaz-koyu); }

/* team: round portraits like PDF page 5 */
.portreler { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 56px; text-align: center; }
.portreler img { width: 168px; height: 168px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover;
  border: 8px solid var(--lavanta); box-shadow: 0 0 0 1px var(--cizgi); }
.portreler h2 { font-size: 1.12rem; font-weight: 700; max-width: none; }
.portreler .rol { display: block; margin-top: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mor); }
.portreler p { margin-top: 4px; font-size: 0.93rem; }
.paydaslar { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--cizgi); color: var(--lacivert); }
.paydaslar span { margin-right: 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mor); }
.ekip-bolum { background: radial-gradient(circle at 100% 0, var(--lavanta) 0 220px, transparent 221px); }

/* contact like PDF page 11 */
.iletisim-liste { list-style: none; display: grid; gap: 14px; margin-top: 32px; }
.iletisim-liste li, .adres { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center; }
.iletisim-liste .ikon, .adres .ikon { color: var(--mor); display: inline-grid; place-items: center; }
.iletisim-liste svg, .adres svg { width: 20px; height: 20px; }
.iletisim-liste a { color: var(--lacivert); text-decoration: none; font-size: 1.05rem; }
.iletisim-liste a:hover { color: var(--mor); }
.iletisim-liste a.eposta { color: var(--mor); font-weight: 600; }
.adres { align-items: start; margin-top: 32px; }
.adres address { font-style: normal; color: var(--gri); margin-top: 2px; }
.adres .kucuk { display: inline-block; margin-top: 6px; font-size: 0.88rem; }
.marka-pano { background: var(--lavanta); border-radius: 220px 0 0 0; min-height: 520px; display: grid; place-content: center; justify-items: center;
  padding: 48px; text-align: center; }
.marka-pano img { width: 210px; }
.marka-pano p { margin-top: 24px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lacivert); line-height: 1.8; }

/* footer slogan */
.alt-slogan { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mor) !important; flex-basis: 100%; }

@media (max-width: 1000px) {
  .kategori-panolar, .profil-kartlar { grid-template-columns: repeat(2, 1fr); }
  .portreler { grid-template-columns: repeat(3, 1fr); }
  .ikonlu.dortlu { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .kahraman-izgara, .yari, .destek-izgara, .baslik-iki { grid-template-columns: 1fr; gap: 40px; }
  .panel-gorsel.dikey { aspect-ratio: 4 / 3; }
  .panel-gorsel.kare { border-radius: 90px 24px 24px 24px; }
  .ikonlu.yatay { grid-template-columns: 1fr; }
  .marka-pano { min-height: 0; border-radius: 120px 24px 24px 24px; }
}
@media (max-width: 600px) {
  .kategori-panolar, .profil-kartlar, .ikonlu.dortlu { grid-template-columns: 1fr; }
  .portreler { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .portreler img { width: 128px; height: 128px; border-width: 6px; }
  .rakamlar { grid-template-columns: repeat(2, auto); gap: 24px 40px; }
  .tanima { grid-template-columns: 1fr; }
  .panel-gorsel.serit { aspect-ratio: 4 / 3; }
  .kahraman h1 { font-size: 2.9rem; }
}

/* fixes after first demo review */
.kategori h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.yari h1 { font-size: clamp(2rem, 3.8vw, 3rem); max-width: none; }
.yari .urun-slogan { max-width: none; }
.kahraman .etiket { margin-top: 24px; }
@media (max-width: 900px) { .kahraman { padding-top: 40px; } .kahraman .etiket { margin-top: 0; } }

/* ===== Motion (CSS only — the site's CSP allows no scripts) ===== */
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes belir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes kayarak { from { opacity: 0; transform: translateX(36px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero: content rises in, image slides in */
  .kahraman-izgara > div { animation: belir .8s cubic-bezier(.2,.7,.2,1) both; }
  .kahraman-izgara > .panel-gorsel { animation: kayarak 1s .15s cubic-bezier(.2,.7,.2,1) both; }
  .ust-bolum .kap > * { animation: belir .7s cubic-bezier(.2,.7,.2,1) both; }
  /* cards lift on hover */
  .urun-satirlar a, .profil-kartlar a .kart-kapak, .portreler img, .tanima > img, .logo-kutu { transition: transform .25s ease, box-shadow .25s ease; }
  .urun-satirlar a:hover { transform: translateY(-3px); }
  .profil-kartlar a:hover .kart-kapak { transform: translateY(-4px); }
  .portreler li:hover img { transform: scale(1.04); }
  /* scroll-driven: sections and numbers start when they come into view (Chromium, Safari 26+);
     other browsers run the same animations on load */
  @supports (animation-timeline: view()) {
    .bolum:not(.ust-bolum) .kap > *, .kat-pano, .profil-kartlar > li, .portreler > li, .ikonlu > li, .tanima {
      animation: belir linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
  }
}

/* request form */
.bildirim-form input[type="text"], .bildirim-form input[type="tel"], .bildirim-form textarea { font: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1.5px solid var(--cizgi); border-radius: 10px; color: var(--lacivert); background: var(--beyaz); width: 100%; }
.bildirim-form textarea { resize: vertical; min-height: 104px; }
.bildirim-form input:focus, .bildirim-form textarea:focus { outline: 3px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
.bildirim-form input[type="email"] { width: 100%; }
.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alan-cift > div { display: grid; gap: 10px; }
.talep-form { gap: 8px; }
.talep-form label:not(.onay) { margin-top: 6px; }
.pencere-kutu { max-width: 520px; }
@media (max-width: 600px) { .alan-cift { grid-template-columns: 1fr; } }

/* stats: equal columns, aligned labels, fixed-width digits while counting */
.rakamlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 640px; margin-top: 44px; }
.rakamlar li { padding: 0 20px; border-left: 1px solid var(--cizgi); }
.rakamlar li:first-child { padding-left: 0; border-left: 0; }
.rakamlar strong { display: block; min-width: 0; font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rakamlar span { display: block; margin-top: 8px; font-size: 0.88rem; line-height: 1.35; color: var(--gri); }
@media (max-width: 600px) {
  .rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .rakamlar li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* form format checks: message appears only after the visitor has interacted with the field (:user-invalid) */
.hata-not { display: none; margin-top: -4px; font-size: 0.8rem; line-height: 1.4; color: #B42318; }
.bildirim-form input:user-invalid, .bildirim-form textarea:user-invalid { border-color: #D92D20; background: #FFF7F6; }
.bildirim-form input:user-invalid:focus, .bildirim-form textarea:user-invalid:focus { outline-color: #F3B4AE; }
.bildirim-form input:user-invalid + .hata-not, .bildirim-form textarea:user-invalid + .hata-not,
.bildirim-form .onay:has(input:user-invalid) + .hata-not { display: block; }
.bildirim-form .onay:has(input:user-invalid) span { color: #B42318; }
.bildirim-form input[type="email"]:user-valid, .bildirim-form input[type="tel"]:user-valid { border-color: var(--turkuaz); }
.alan-cift > div { align-content: start; }
/* after a submit attempt (form.js adds .denendi) show every message, not only touched fields */
.bildirim-form.denendi input:invalid, .bildirim-form.denendi textarea:invalid { border-color: #D92D20; background: #FFF7F6; }
.bildirim-form.denendi input:invalid + .hata-not, .bildirim-form.denendi textarea:invalid + .hata-not,
.bildirim-form.denendi .onay:has(input:invalid) + .hata-not { display: block; }
.bildirim-form.denendi .onay:has(input:invalid) span { color: #B42318; }