/* ==================================================================
   HIZMET DETAY - EK BOLUMLER
   ------------------------------------------------------------------
   .cb  Calisma bicimi   (Bizde standart / Sik rastlanan durum)
   .ol  Olcum bandi      (Neyi olcuyoruz, nasil raporluyoruz)
   .nb  Nasil basliyoruz (3 adim + CTA)

   hizmet-ust.css ile ayni mantik: Tailwind build'inden bagimsiz,
   elle yazilmis CSS. Renkler HTML uzerinden --hz-r1 / --hz-r2 ile
   hizmete gore geliyor. Kapsayici olarak .hz-kap kullaniliyor,
   o hizmet-ust.css icinde tanimli.

   Zemin sirasi bilerek degisiyor ki sayfa tek duze akmasin:
     ny  beyaz  ->  cb  koyu  ->  ol  acik gri  ->  nb  beyaz
================================================================== */

/* ==================================================================
   CALISMA BICIMI  (.cb)
================================================================== */

.cb{
  --hz-r1:#132a4a;
  --hz-r2:#2563eb;
  position:relative;
  background:#0f172a;
  color:#fff;
  padding:3rem 0;
  overflow:hidden;
}
@media (min-width:1024px){ .cb{ padding:4rem 0; } }

.cb::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(48rem 26rem at 82% -12%,var(--hz-r2),transparent 62%);
  opacity:.22;
  pointer-events:none;
}
.cb > *{ position:relative; }

.cb-ust{ max-width:44rem; margin:0 0 2rem; }

.cb-etiket{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.cb-etiket i{ color:#93c5fd; font-size:.68rem; }

.cb-baslik{
  margin:.9rem 0 0;
  font-size:clamp(1.4rem,3vw,2.05rem);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}

.cb-alt{
  margin:.7rem 0 0;
  font-size:.95rem;
  line-height:1.7;
  color:rgba(255,255,255,.66);
}

.cb-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }

/* Bir satir = konu basligi + iki hucre.
   900px ustunde uc sutun; altinda alt alta yigiliyor ki iki hucrenin
   metni dar sutunda sikismasin. */
.cb-satir{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
  padding:1.15rem;
  border-radius:1rem;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  transition:background .25s ease,border-color .25s ease;
}
.cb-satir:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.2);
}
@media (min-width:900px){
  .cb-satir{ grid-template-columns:13rem 1fr 1fr; gap:1.25rem; align-items:start; }
}

.cb-konu{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  line-height:1.35;
}
.cb-sira{
  flex:0 0 auto;
  width:1.5rem;
  height:1.5rem;
  border-radius:.45rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hz-r2);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
}

.cb-hucre{ padding:.75rem .85rem; border-radius:.7rem; }
.cb-hucre-baslik{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:0 0 .35rem;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.cb-hucre-metin{ margin:0; font-size:.83rem; line-height:1.62; }

/* Sol hucre yesil vurgulu, sag hucre bilerek soluk:
   goz once "bizde standart" tarafina gitsin. */
.cb-bizde{ background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.26); }
.cb-bizde .cb-hucre-baslik{ color:#6ee7a8; }
.cb-bizde .cb-hucre-metin{ color:rgba(255,255,255,.86); }

.cb-sik{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.cb-sik .cb-hucre-baslik{ color:rgba(255,255,255,.45); }
.cb-sik .cb-hucre-metin{ color:rgba(255,255,255,.52); }

.cb-dipnot{
  margin:1.25rem 0 0;
  font-size:.73rem;
  line-height:1.6;
  color:rgba(255,255,255,.38);
}

/* Mobilde alti satir alt alta yigildigi icin bolum tek basina
   ~2,7 ekran tutuyordu. Dar ekranda bosluklar ve govde punto
   kisiliyor; sag hucre (de-vurgulu taraf) biraz daha siki.
   Icerikten hicbir sey cikarilmiyor. */
@media (max-width:899px){
  .cb{ padding:2.5rem 0; }
  .cb-ust{ margin-bottom:1.5rem; }
  .cb-liste{ gap:.65rem; }
  .cb-satir{ padding:.95rem; gap:.55rem; }
  .cb-konu{ font-size:.9rem; }
  .cb-hucre{ padding:.6rem .7rem; }
  .cb-hucre-baslik{ margin-bottom:.25rem; font-size:.66rem; }
  /* Punto .775rem'e kadar dusurulup geri alindi: 12.4px mobilde
     govde metni icin fazla kucuk. Kazanc bosluklardan saglaniyor,
     okunabilirlikten degil. */
  .cb-hucre-metin{ font-size:.82rem; line-height:1.58; }
}

/* ==================================================================
   OLCUM BANDI  (.ol)
================================================================== */

.ol{
  --hz-r1:#132a4a;
  --hz-r2:#2563eb;
  background:#f8fafc;
  padding:3rem 0;
}
@media (min-width:1024px){ .ol{ padding:3.5rem 0; } }

.ol-kutu{
  padding:1.75rem 1.5rem;
  border-radius:1.25rem;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px -22px rgba(15,23,42,.4);
}
@media (min-width:1024px){ .ol-kutu{ padding:2.25rem; } }

.ol-ust{ display:flex; align-items:flex-start; gap:.95rem; margin-bottom:1.5rem; }

.ol-ikon{
  flex:0 0 auto;
  width:2.75rem;
  height:2.75rem;
  border-radius:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eff6ff;
  background:color-mix(in srgb,var(--hz-r2) 12%,#fff);
  color:var(--hz-r2);
  font-size:1rem;
}

.ol-etiket{
  display:block;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}

.ol-baslik{
  margin:.3rem 0 0;
  font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
  scroll-margin-top:6rem;      /* icindekiler capasi header altinda kalmasin */
}

.ol-liste{ display:grid; gap:1.1rem; }
@media (min-width:900px){
  .ol-liste{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1.4rem; }
}

.ol-madde{
  padding-left:1rem;
  border-left:3px solid #e5e7eb;
  border-left-color:color-mix(in srgb,var(--hz-r2) 45%,#e5e7eb);
}
.ol-madde-baslik{
  margin:0;
  scroll-margin-top:6rem;
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
  line-height:1.35;
}
.ol-madde-metin{
  margin:.5rem 0 0;
  font-size:.875rem;
  line-height:1.72;
  color:#64748b;
}

.ol-not{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin:1.5rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid #e5e7eb;
  font-size:.8rem;
  line-height:1.65;
  color:#64748b;
}
.ol-not i{ color:var(--hz-r2); margin-top:.15rem; font-size:.78rem; }

/* ==================================================================
   NASIL BASLIYORUZ  (.nb)
================================================================== */

.nb{
  --hz-r1:#132a4a;
  --hz-r2:#2563eb;
  background:#fff;
  padding:3rem 0;
}
@media (min-width:1024px){ .nb{ padding:3.5rem 0; } }

.nb-kutu{
  position:relative;
  overflow:hidden;
  padding:2rem 1.5rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg,var(--hz-r1),var(--hz-r2));
  color:#fff;
  box-shadow:0 22px 45px -26px rgba(15,23,42,.7);
}
@media (min-width:1024px){ .nb-kutu{ padding:2.5rem; } }

.nb-kutu::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(to bottom right,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom right,#000,transparent 72%);
  pointer-events:none;
}
.nb-kutu > *{ position:relative; }

.nb-ust{ max-width:40rem; margin-bottom:1.75rem; }
.nb-baslik{
  margin:0;
  font-size:clamp(1.3rem,2.8vw,1.85rem);
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
}
.nb-alt{
  margin:.6rem 0 0;
  font-size:.925rem;
  line-height:1.7;
  color:rgba(255,255,255,.74);
}

.nb-adimlar{
  list-style:none;
  margin:0 0 1.75rem;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
}
@media (min-width:768px){ .nb-adimlar{ grid-template-columns:repeat(3,1fr); gap:1rem; } }

.nb-adim{
  position:relative;
  padding:1.15rem 1.1rem 1.2rem;
  border-radius:.95rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.nb-sira{
  position:absolute;
  top:.85rem;
  right:.95rem;
  font-size:1.9rem;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.16);
}
.nb-ikon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  margin-bottom:.7rem;
  border-radius:.6rem;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:.82rem;
}
.nb-adim-ad{ margin:0; font-size:.95rem; font-weight:700; color:#fff; }
.nb-adim-metin{
  margin:.35rem 0 0;
  font-size:.82rem;
  line-height:1.62;
  color:rgba(255,255,255,.75);
}

.nb-cta{ display:flex; flex-wrap:wrap; gap:.65rem; }
.nb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.3rem;
  border-radius:.8rem;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.nb-btn:hover{ transform:translateY(-2px); }
.nb-btn-birincil{ background:#fff; color:var(--hz-r1); box-shadow:0 10px 22px -10px rgba(0,0,0,.5); }
.nb-btn-ikincil{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }
.nb-btn-ikincil:hover{ background:rgba(255,255,255,.22); }
.nb-btn-wp{ background:#25d366; color:#fff; }
.nb-btn-wp:hover{ background:#1eb355; }

@media (max-width:639px){
  .nb-cta{ flex-direction:column; }
  .nb-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .nb-btn:hover{ transform:none; }
  .cb-satir{ transition:none; }
}