/* =========================================================
   /yazilim-ve-e-ticaret/ — kisa filmlerle hizmet anlatimi
   (pages/hizmet-film.php, assets/js/film.js)
   ========================================================= */

/* ---------- Giris: koyu, sinematik ---------- */
.film-giris {
  background: var(--dark); color: var(--ink-onDark);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
}
.film-giris::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 92%, rgba(237, 109, 30, 0.3), transparent 72%);
  pointer-events: none;
}
.film-giris::after { display: none; }
.film-giris__ic { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; }
.film-giris .eyebrow { color: #FFB27D; justify-content: center; }
.film-giris__baslik {
  margin-top: 1rem; font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--ink-onDark);
}
.film-vurgu {
  background: linear-gradient(90deg, #FFB27D, var(--accent) 45%, #FF8A3D 70%, #FFB27D);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: film-parilti 6s linear infinite;
}
@keyframes film-parilti { to { background-position: -200% 0; } }
.film-giris__lede { margin-top: 1.4rem; max-width: 52ch; font-size: var(--fs-lead); color: var(--ink-onDarkDim); }

.film-giris__secim { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.film-secim {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.film-secim img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.6s var(--ease); }
.film-secim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(23, 18, 15, 0.85)); }
.film-secim:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(237, 109, 30, 0.55), 0 0 0 1px rgba(237, 109, 30, 0.5); }
.film-secim:hover img { transform: scale(1.04); }
.film-secim__oynat {
  position: absolute; left: 50%; top: 42%; z-index: 2; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(237, 109, 30, 0.6); animation: film-nabiz 2.2s ease-out infinite;
}
.film-secim__oynat svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
@keyframes film-nabiz { 0% { box-shadow: 0 0 0 0 rgba(237, 109, 30, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(237, 109, 30, 0); } }
.film-secim__yazi { position: absolute; left: 1rem; bottom: 0.85rem; z-index: 2; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.film-secim__yazi small { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: #FFB27D; }

/* ---------- Bolum: sabit sahne + akan adimlar ---------- */
.film-bolum { padding-block: clamp(4rem, 8vw, 7rem); }
.film-bolum--ters { background: var(--surface-2); }
.film-bolum__ic { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 1000px) {
  .film-bolum__ic { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }
  .film-bolum--ters .film-bolum__sahne { order: 2; }
  .film-bolum__sahne { position: sticky; top: calc(50vh - 14rem); }
  /* Kaydirarak anlatim: adimlar sirayla ekranin ortasindan gecsin diye aralar acik */
  /* Adimlar sirayla ekranin ortasindan gecsin: metinler hep acik, aralar olculu */
  .film-bolum .film-adimlar { gap: 2.4rem; margin-top: 2.4rem; padding-bottom: 10vh; }
}

.film-cerceve {
  position: relative; border-radius: 18px; overflow: hidden; background: var(--dark);
  box-shadow: 0 50px 90px -50px rgba(23, 18, 15, 0.65), 0 0 0 1px var(--line);
}
.film-cerceve__ust { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; background: var(--dark-2); }
.film-cerceve__ust i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.film-cerceve__ust i:first-child { background: #FF5F57; } .film-cerceve__ust i:nth-child(2) { background: #FEBC2E; } .film-cerceve__ust i:nth-child(3) { background: #28C840; }
.film-cerceve__ust span { margin-left: 0.6rem; font-size: var(--fs-xs); color: var(--ink-onDarkDim); }
.film-cerceve video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg); }
.film-cerceve__dugme {
  position: absolute; right: 0.9rem; bottom: 1.1rem; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(23, 18, 15, 0.72); display: grid; place-items: center; backdrop-filter: blur(6px);
}
.film-cerceve__dugme svg { width: 18px; height: 18px; fill: #fff; }
.film-cerceve__dugme .film-ikon-oynat { display: none; }
.film-cerceve.is-durdu .film-ikon-oynat { display: block; } .film-cerceve.is-durdu .film-ikon-dur { display: none; }
.film-cerceve__zaman { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(23, 18, 15, 0.15); }
.film-cerceve__zaman span { display: block; height: 100%; width: 0; background: var(--accent); }

.film-bolum__metin h2 { margin-top: 0.5rem; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.035em; }
.film-adimlar { list-style: none; margin: 2rem 0 1.6rem; padding: 0; display: grid; gap: 0.4rem; }
.film-adim { border-radius: 14px; padding: 1.1rem 1.2rem; opacity: 0.6; border: 1px solid transparent; transition: opacity 0.4s ease, background 0.4s var(--ease), border-color 0.4s var(--ease); }
.film-adim__bas {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-dim); transition: color 0.3s ease;
}
.film-adim__no { font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--ink-dim); }
.film-adim p { margin: 0.45rem 0 0 2.2rem; font-size: var(--fs-sm); color: var(--ink-dim); }
.film-adim.is-aktif { opacity: 1; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.film-bolum--ters .film-adim.is-aktif { background: var(--bg); }
.film-adim.is-aktif .film-adim__bas { color: var(--ink); }
.film-adim.is-aktif .film-adim__no { color: var(--accent); }


/* ---------- Ara bant: somut bilgiler ---------- */
.film-ara { background: var(--dark); color: var(--ink-onDark); padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.film-ara__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; text-align: center; }
.film-ara b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; color: var(--accent); }
.film-ara span { font-size: var(--fs-sm); color: var(--ink-onDarkDim); }

/* ---------- Kapanis kartlari ---------- */
.film-son__kartlar { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.film-son__kart {
  display: grid; gap: 0.5rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.film-son__kart:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-lg); }
.film-son__kart small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.film-son__kart b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; }
.film-son__kart span { color: var(--ink-dim); font-size: var(--fs-sm); }
.film-son__kart em { font-style: normal; font-weight: 600; color: var(--accent-deep); display: inline-flex; gap: 0.35rem; align-items: center; margin-top: 0.4rem; }
.film-son__kart--koyu { background: var(--dark); color: var(--ink-onDark); box-shadow: none; }
.film-son__kart--koyu span { color: var(--ink-onDarkDim); }
.film-son__kart--koyu small, .film-son__kart--koyu em { color: #FFB27D; }

@media (max-width: 640px) {
  .film-giris__secim { grid-template-columns: 1fr; width: 100%; }
  .film-adim p { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .film-vurgu, .film-secim__oynat { animation: none; }
}

/* ---------- /yapay-zeka-web-tasarim/: nerede biter, nerede baslar ---------- */
.yz-sinir { background: var(--dark); color: var(--ink-onDark); padding-block: clamp(3.5rem, 7vw, 6rem); }
.yz-sinir .eyebrow { color: #FFB27D; }
.yz-sinir h2 { margin-top: 0.5rem; color: var(--ink-onDark); max-width: 22ch; }
.yz-sinir__iki { display: grid; gap: 1.2rem; margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.yz-sinir__iki > div { padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-onDark); }
.yz-sinir__iki > div:last-child { background: rgba(237, 109, 30, 0.12); box-shadow: inset 0 0 0 1px rgba(237, 109, 30, 0.45); }
.yz-sinir h3 { font-size: var(--fs-h3); color: var(--ink-onDark); }
.yz-sinir ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.yz-sinir li { position: relative; padding-left: 1.4rem; color: var(--ink-onDarkDim); font-size: var(--fs-sm); line-height: 1.5; }
.yz-sinir li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.yz-sinir__iki > div:first-child li::before { background: #9AA9B8; }