/* =========================================================
   b2bNet — arac-detay.css
   /araclar/<arac> — tek arac sayfasi
   Ortak iskelet: koyu tepe + tepeye binen hesap karti +
   aciklama bloklari + diger araclar + cagri.
   Tum sinif adlari .b2b-ard- onekli.
   ========================================================= */

.b2b-ard{
  --ard-koyu:#0B2050;
  --ard-koyu-2:#12306E;
  --ard-kenar:#E3EBF8;
  --ard-yazi:#41546F;
  --ard-yazi-2:#6B7F9C;
  --ard-golge:0 1px 2px rgba(15,44,107,.05), 0 26px 60px -28px rgba(15,44,107,.42);
  background:#F6F9FF;
}

/* ---------------------------------------------------------
   1. TEPE
   Ust alan durgunken ~128px; padding onu hesaba katar.
   --------------------------------------------------------- */
.b2b-ard-tepe{
  position:relative; overflow:hidden;
  padding:172px 24px 132px;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(37,99,235,.09) 0%, rgba(37,99,235,0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F1F6FE 74%, #F6F9FF 100%);
}
@media (max-width:900px){ .b2b-ard-tepe{ padding:162px 20px 120px; } }
@media (max-width:640px){ .b2b-ard-tepe{ padding:148px 18px 110px; } }

.b2b-ard-tepe::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,44,107,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,44,107,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 78%);
}
.b2b-ard-tepe-ic{
  position:relative; z-index:2;
  max-width:760px; margin-inline:auto; text-align:center;
}

.b2b-ard-iz{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:#7488A6;
}
.b2b-ard-iz a{ color:var(--b2b-mavi-700); font-weight:600; }
.b2b-ard-iz a:hover{ text-decoration:underline; }
.b2b-ard-iz svg{ width:13px; height:13px; opacity:.5; }

.b2b-ard-baslik{
  margin:18px 0 0;
  font-size:clamp(30px, 4.4vw, 46px); line-height:1.1;
  font-weight:800; letter-spacing:-.024em; color:#0F2C6B;
}
.b2b-ard-giris{
  margin:16px auto 0; max-width:560px;
  font-size:16px; line-height:1.65; color:#5A6E8C;
}

/* ---------------------------------------------------------
   2. GOVDE + HESAP KARTI
   --------------------------------------------------------- */
.b2b-ard-govde{
  max-width:960px; margin-inline:auto;
  padding:0 24px 96px;
}
@media (max-width:640px){ .b2b-ard-govde{ padding:0 16px 72px; } }

.b2b-ard-kart{
  margin-top:-96px; position:relative; z-index:3;
  border-radius:22px; border:1px solid var(--ard-kenar);
  background:#fff; box-shadow:var(--ard-golge);
  overflow:hidden;
}
.b2b-ard-kart-ic{ padding:30px 30px 8px; }
@media (max-width:640px){ .b2b-ard-kart-ic{ padding:22px 18px 6px; } }

/* ---- form alanlari ---- */
.b2b-ard-satir{
  display:grid; gap:16px; margin-bottom:20px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.b2b-ard-satir--tek{ grid-template-columns:1fr; }

.b2b-ard-alan{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.b2b-ard-etiket{
  font-size:13px; font-weight:600; color:#5A6E8C;
  display:flex; align-items:center; gap:6px;
}
.b2b-ard-not{ font-weight:500; color:#93A5BF; font-size:12.5px; }

.b2b-ard-girdi{ position:relative; display:flex; align-items:center; }
.b2b-ard-girdi input,
.b2b-ard-girdi select{
  width:100%; height:52px; padding:0 15px;
  border-radius:13px; border:1.5px solid var(--ard-kenar);
  background:#FBFDFF; color:#0F2C6B;
  font-family:inherit; font-size:18px; font-weight:600;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.b2b-ard-girdi input:focus,
.b2b-ard-girdi select:focus{
  outline:none; border-color:var(--b2b-mavi-600); background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.b2b-ard-girdi--birim input{ padding-right:46px; }
.b2b-ard-birim{
  position:absolute; right:15px;
  font-size:15px; font-weight:600; color:#93A5BF; pointer-events:none;
}
.b2b-ard-girdi select{ cursor:pointer; appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A5BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.b2b-ard-girdi textarea{
  width:100%; min-height:150px; padding:13px 15px; resize:vertical;
  border-radius:13px; border:1.5px solid var(--ard-kenar);
  background:#FBFDFF; color:#0F2C6B;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px; line-height:1.7;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.b2b-ard-girdi textarea:focus{
  outline:none; border-color:var(--b2b-mavi-600); background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* ---- segment secici (oran vb.) ---- */
.b2b-ard-segment{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:5px; border-radius:14px; background:#F1F6FE;
  border:1px solid var(--ard-kenar);
}
.b2b-ard-segment button{
  flex:1 1 auto; min-width:56px; height:42px; padding:0 12px;
  border:0; border-radius:10px; cursor:pointer; background:transparent;
  font-family:inherit; font-size:14.5px; font-weight:600; color:#5A6E8C;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.b2b-ard-segment button:hover{ color:#1B3E86; }
.b2b-ard-segment button[aria-pressed="true"]{
  background:#fff; color:var(--b2b-mavi-700);
  box-shadow:0 1px 2px rgba(15,44,107,.08), 0 4px 12px -6px rgba(15,44,107,.3);
}

/* ---- satir listesi (cek/senet, iskonto kademeleri) ---- */
.b2b-ard-liste{ display:flex; flex-direction:column; gap:10px; }
.b2b-ard-liste-satir{
  display:grid; gap:10px; align-items:center;
  grid-template-columns:1fr 1fr 44px;
}
@media (max-width:520px){ .b2b-ard-liste-satir{ grid-template-columns:1fr 1fr 40px; gap:8px; } }
.b2b-ard-sil{
  width:44px; height:52px; border:0; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#A9BAD3; background:#F4F8FE;
  transition:color .18s ease, background-color .18s ease;
}
.b2b-ard-sil:hover{ color:#D6455B; background:#FDEEF0; }
.b2b-ard-sil svg{ width:17px; height:17px; }
.b2b-ard-ekle{
  align-self:flex-start; margin-top:2px;
  display:inline-flex; align-items:center; gap:7px;
  height:42px; padding:0 16px; border-radius:11px; cursor:pointer;
  border:1.5px dashed #C4D7F2; background:transparent;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--b2b-mavi-700);
  transition:border-color .18s ease, background-color .18s ease;
}
.b2b-ard-ekle:hover{ border-color:var(--b2b-mavi-600); background:#F2F7FF; }
.b2b-ard-ekle svg{ width:15px; height:15px; }

/* ---------------------------------------------------------
   3. SONUC PANELI
   --------------------------------------------------------- */
/* Sonuc paneli .b2b-ard-kart'in dogrudan cocugu (kart-ic'in degil),
   bu yuzden negatif kenar bosluguna gerek yok; sadece kendi dolgusu. */
.b2b-ard-sonuc{
  margin:0; padding:26px 30px 28px;
  background:linear-gradient(160deg,#F4F8FF 0%, #EAF2FF 100%);
  border-top:1px solid var(--ard-kenar);
}
@media (max-width:640px){ .b2b-ard-sonuc{ padding:22px 18px 24px; } }

.b2b-ard-ana{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px;
}
.b2b-ard-ana-etiket{
  width:100%; margin:0 0 2px;
  font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#7C90AE;
}
.b2b-ard-ana-deger{
  font-size:clamp(30px, 5vw, 42px); line-height:1.05;
  font-weight:800; letter-spacing:-.02em; color:#0F2C6B;
  font-variant-numeric:tabular-nums;
}
.b2b-ard-ana-birim{ font-size:.55em; font-weight:700; color:#5B77A8; margin-left:2px; }

.b2b-ard-kopyala{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px; border-radius:10px; cursor:pointer;
  border:1px solid #C9DBF5; background:#fff;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--b2b-mavi-700);
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.b2b-ard-kopyala:hover{ border-color:var(--b2b-mavi-600); background:#F2F7FF; }
.b2b-ard-kopyala svg{ width:15px; height:15px; }
.b2b-ard-kopyala.b2b-ard-oldu{ border-color:#7ED4A6; color:#1B8A5A; background:#F0FBF5; }

.b2b-ard-kirilim{
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(15,44,107,.1);
  display:grid; gap:12px 26px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.b2b-ard-kirilim-oge{ min-width:0; }
.b2b-ard-kirilim-oge[hidden]{ display:none !important; }
.b2b-ard-kirilim-etiket{
  margin:0 0 3px; font-size:13px; color:#7488A6;
}
.b2b-ard-kirilim-deger{
  margin:0; font-size:19px; font-weight:700; color:#1B3E86;
  font-variant-numeric:tabular-nums;
}
.b2b-ard-kirilim-deger--nazik{ color:#5A6E8C; font-weight:600; }

.b2b-ard-uyari{
  margin-top:16px; padding:11px 14px; border-radius:11px;
  background:#FFF6E8; border:1px solid #F5DCB2;
  font-size:13.5px; line-height:1.5; color:#8A6220;
}
.b2b-ard-uyari[hidden]{ display:none !important; }

/* ---- cikti alani (toplu araclar) ---- */
.b2b-ard-cikti{
  margin-top:18px;
}
.b2b-ard-cikti textarea{
  background:#fff; min-height:170px;
}
.b2b-ard-cikti-ust{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}

/* ---------------------------------------------------------
   4. ACIKLAMA BLOKLARI
   --------------------------------------------------------- */
.b2b-ard-yazi{ margin-top:56px; }
.b2b-ard-bolum{ margin-bottom:40px; }
.b2b-ard-bolum-baslik{
  margin:0 0 14px; font-size:21px; font-weight:700;
  letter-spacing:-.015em; color:#0F2C6B;
}
.b2b-ard-p{
  margin:0 0 14px; font-size:16px; line-height:1.72; color:var(--ard-yazi);
}
.b2b-ard-p:last-child{ margin-bottom:0; }
.b2b-ard-p strong{ color:#12306E; font-weight:700; }

.b2b-ard-formul{
  margin:18px 0; padding:20px 24px; border-radius:14px;
  border:1px solid var(--ard-kenar); background:#fff;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:15px; line-height:2; color:#12306E;
  overflow-x:auto;
}
.b2b-ard-formul b{ color:var(--b2b-mavi-700); font-weight:700; }

.b2b-ard-ornek{
  margin:18px 0; padding:20px 24px; border-radius:14px;
  border:1px solid #D5E6D9; background:#F4FBF6;
}
.b2b-ard-ornek-ad{
  margin:0 0 10px; font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#3F8A62;
}
.b2b-ard-ornek p{ margin:0 0 8px; font-size:15px; line-height:1.7; color:#3A5548; }
.b2b-ard-ornek p:last-child{ margin-bottom:0; }

.b2b-ard-liste-yazi{ margin:14px 0; padding:0; list-style:none; }
.b2b-ard-liste-yazi li{
  position:relative; padding-left:26px; margin-bottom:9px;
  font-size:15.5px; line-height:1.65; color:var(--ard-yazi);
}
.b2b-ard-liste-yazi li::before{
  content:''; position:absolute; left:6px; top:10px;
  width:6px; height:6px; border-radius:999px; background:var(--b2b-mavi-500);
}

.b2b-ard-tablo-sar{ overflow-x:auto; margin:18px 0; }
.b2b-ard-tablo{
  width:100%; border-collapse:collapse; font-size:15px;
  border:1px solid var(--ard-kenar); border-radius:12px; overflow:hidden;
  background:#fff;
}
.b2b-ard-tablo th,
.b2b-ard-tablo td{
  padding:12px 16px; text-align:left; border-bottom:1px solid var(--ard-kenar);
}
.b2b-ard-tablo th{
  background:#F4F8FF; font-weight:700; font-size:13.5px; color:#5A6E8C;
  white-space:nowrap;
}
.b2b-ard-tablo tr:last-child td{ border-bottom:0; }
.b2b-ard-tablo td{ color:var(--ard-yazi); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------
   5. DIGER ARACLAR
   --------------------------------------------------------- */
.b2b-ard-diger{ margin-top:48px; padding-top:34px; border-top:1px solid var(--ard-kenar); }
.b2b-ard-diger-baslik{
  margin:0 0 14px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#8496B2;
}
.b2b-ard-diger-dizi{ display:flex; flex-wrap:wrap; gap:8px; }
.b2b-ard-diger-oge{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--ard-kenar); background:#fff;
  font-size:14px; font-weight:600; color:#1B3E86;
  transition:border-color .18s ease, background-color .18s ease;
}
.b2b-ard-diger-oge:hover{ border-color:#9FC0EE; background:#F7FAFF; }
.b2b-ard-diger-oge svg{ width:14px; height:14px; opacity:.5; }

/* ---------------------------------------------------------
   6. DIP CAGRI
   --------------------------------------------------------- */
.b2b-ard-cagri{
  position:relative; overflow:hidden; padding:72px 24px;
  background:linear-gradient(150deg,var(--ard-koyu-2) 0%, var(--ard-koyu) 60%, #071531 100%);
}
.b2b-ard-cagri-ic{
  position:relative; z-index:2; max-width:720px;
  margin-inline:auto; text-align:center;
}
.b2b-ard-cagri-baslik{
  margin:0; font-size:clamp(24px, 3.2vw, 34px); line-height:1.2;
  font-weight:800; letter-spacing:-.02em; color:#fff;
}
.b2b-ard-cagri-yazi{
  margin:15px auto 0; max-width:540px;
  font-size:16px; line-height:1.65; color:rgba(255,255,255,.72);
}
.b2b-ard-cagri-dugmeler{
  margin-top:28px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:12px;
}
/* main.css'teki .b2b-buton--cam margin-top:32px tasiyor */
.b2b-ard-cagri-dugmeler .b2b-buton--cam{ margin-top:0; }