/* tikaniklikacma — Burgu Tıkanıklık, 2016 boru hattı / rögar kapağı tasarım (W3.CSS üzerine) */
:root {
  --tk-kobalt: #0b5394;
  --tk-kobalt-koyu: #062c4f;
  --tk-su: #29a8e0;
  --tk-su-acik: #e3f3fb;
  --tk-pvc: #ff7a00;
  --tk-pvc-koyu: #c95f00;
  --tk-gri: #8d99a6;
  --tk-zemin: #eef3f6;
  --tk-beyaz: #ffffff;
  --tk-cizgi: #d6e2ea;
  --tk-yazi: #1d2a35;
  --tk-golge: 0 8px 20px rgba(6, 44, 79, 0.1);
  --tk-baslik: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  --tk-govde: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tk-silindir: linear-gradient(180deg, #f4f7f9 0%, #c9d2d9 45%, #aeb9c2 55%, #dfe6eb 100%);
  --tk-silindir-pvc: linear-gradient(180deg, #ffb066 0%, var(--tk-pvc) 45%, var(--tk-pvc-koyu) 60%, #ff9a3d 100%);
  --tk-dokum: radial-gradient(circle at 35% 30%, #5a6570, #2c343c 70%);
}

html { scroll-behavior: smooth; }
body.tk-body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(41, 168, 224, 0.08) 0 6px, transparent 7px) 0 0 / 60px 60px,
    radial-gradient(circle at 70% 70%, rgba(41, 168, 224, 0.06) 0 4px, transparent 5px) 0 0 / 44px 44px,
    var(--tk-zemin);
  color: var(--tk-yazi);
  font-family: var(--tk-govde);
  font-size: 15px;
  line-height: 1.75;
}
.tk-body h1, .tk-body h2, .tk-body h3, .tk-body h4 { font-family: var(--tk-baslik); font-weight: 700; color: var(--tk-kobalt-koyu); }
a { color: var(--tk-kobalt); text-decoration: none; }
a:hover { color: var(--tk-pvc-koyu); text-decoration: underline; }

.tk-ic {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Akan su şeridi */
.tk-akis {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--tk-su) 0 30px, #7fd0f2 30px 44px, var(--tk-kobalt) 44px 60px);
  background-size: 120px 100%;
  animation: tk-ak 3s linear infinite;
}
@keyframes tk-ak { to { background-position: 120px 0; } }

.tk-ustbar { background: var(--tk-kobalt-koyu); color: #cfe6f7; font-size: 13px; padding: 6px 0; }
.tk-ustbar .fa { color: var(--tk-su); margin-right: 5px; }
.tk-ustbar a { color: #cfe6f7; }

/* Header: beyaz, altından geçen boru */
.tk-header { position: relative; padding: 22px 0 0; background: linear-gradient(180deg, #fff, var(--tk-su-acik)); }
.tk-header > .tk-ic { padding-bottom: 20px; }
.tk-logo { display: flex; align-items: center; gap: 16px; text-decoration: none !important; }
.tk-logo-burgu {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--tk-kobalt) 0 30deg, var(--tk-su) 30deg 60deg);
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--tk-pvc);
  animation: tk-don 6s linear infinite;
}
.tk-logo-burgu::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--tk-kobalt-koyu); }
@keyframes tk-don { to { transform: rotate(360deg); } }
.tk-logo-yazi { display: flex; flex-direction: column; color: var(--tk-kobalt-koyu); font-family: var(--tk-baslik); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: 0.5px; }
.tk-logo-yazi small { font-family: var(--tk-govde); font-size: 13px; font-weight: 600; color: var(--tk-pvc-koyu); letter-spacing: 0.6px; margin-top: 7px; }

/* Telefon: rögar kapağı + etiket */
.tk-kapak-tel { display: flex; align-items: center; text-decoration: none !important; }
.tk-kapak {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 0, 0, 0.35) 7px 9px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, 0.35) 7px 9px),
    var(--tk-dokum);
  border: 4px solid #1f262c;
  box-shadow: 0 0 0 3px #7a8792, 0 8px 14px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 26px;
  transition: transform 0.4s;
}
.tk-kapak .fa { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tk-pvc); }
.tk-kapak-yazi { display: flex; flex-direction: column; margin-left: -24px; padding: 8px 20px 9px 36px; background: var(--tk-kobalt); border-radius: 0 40px 40px 0; color: #fff; line-height: 1.2; box-shadow: 0 6px 12px rgba(6, 44, 79, 0.25); }
.tk-kapak-yazi small { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; color: #9fdcf7; }
.tk-kapak-yazi b { font-family: var(--tk-baslik); font-size: 27px; letter-spacing: 0.5px; }
.tk-kapak-tel:hover .tk-kapak { transform: rotate(90deg); }

/* Boru */
.tk-boru {
  position: relative;
  height: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 220px, rgba(0, 0, 0, 0.18) 220px 222px, transparent 222px 236px, rgba(0, 0, 0, 0.18) 236px 238px),
    var(--tk-silindir);
  border-top: 1px solid #9aa7b1;
  border-bottom: 1px solid #7d8a95;
}
@media (max-width: 600px) {
  .tk-logo-yazi { font-size: 24px; }
  .tk-kapak-tel { width: 100%; }
  .tk-kapak-yazi { flex: 1; }
  .tk-kapak-yazi b { font-size: 24px; }
}

/* Menü: kobalt boru */
.tk-nav { background: linear-gradient(180deg, #1a6db8, var(--tk-kobalt) 50%, #094580); box-shadow: 0 4px 0 var(--tk-pvc); }
.tk-nav .tk-ic { justify-content: flex-start; gap: 0; }
.tk-nav a {
  display: inline-block;
  padding: 13px 18px;
  color: #fff !important;
  font-family: var(--tk-baslik);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-decoration: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s;
}
.tk-nav a:first-child { background: var(--tk-pvc); }
.tk-nav a:hover { background: var(--tk-kobalt-koyu); }
@media (max-width: 600px) { .tk-nav a { padding: 10px 9px; font-size: 12px; letter-spacing: 0.2px; } }

.tk-sayfa { margin-top: 32px; }

.tk-kart { background: var(--tk-beyaz); border: 1px solid var(--tk-cizgi); border-radius: 10px; box-shadow: var(--tk-golge); margin-bottom: 24px; overflow: hidden; }
.tk-bolum { padding: 14px 24px 20px; }
.tk-cerceve { display: block; margin: 6px 0 14px; border-radius: 10px; border: 5px solid var(--tk-su-acik); box-shadow: 0 0 0 1px var(--tk-cizgi); box-sizing: border-box; }

/* H1: flanşlı boru parçası */
.tk-bolum > h1 {
  position: relative;
  margin: 10px 14px 22px;
  padding: 16px 30px;
  font-size: 26px;
  line-height: 1.25;
  text-align: center;
  color: var(--tk-kobalt-koyu);
  background: var(--tk-silindir);
  border-radius: 6px;
  box-shadow: 0 5px 0 rgba(6, 44, 79, 0.08);
}
.tk-bolum > h1::before, .tk-bolum > h1::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 16px;
  border-radius: 4px;
  background: var(--tk-silindir-pvc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.tk-bolum > h1::before { left: -14px; }
.tk-bolum > h1::after { right: -14px; }
@media (max-width: 600px) { .tk-bolum > h1 { font-size: 20px; padding: 14px 20px; } }

/* H2: dalgalı su şeridi */
.tk-bolum > h2 {
  position: relative;
  margin: 16px -24px 22px;
  padding: 12px 24px 12px 56px;
  font-size: 19px;
  color: #fff;
  background: var(--tk-kobalt);
}
.tk-bolum > h2::before { content: "\f043"; position: absolute; left: 24px; top: 50%; margin-top: -12px; font: 22px/24px FontAwesome; color: var(--tk-su); }
.tk-bolum > h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 10px -3px, var(--tk-kobalt) 10px, transparent 10.5px) 0 0 / 20px 10px repeat-x; }
#sss > h2 { background: var(--tk-kobalt-koyu); }
#sss > h2::after { background-image: radial-gradient(circle at 10px -3px, var(--tk-kobalt-koyu) 10px, transparent 10.5px); }
.tk-ozellik-bolum > h2 { background: var(--tk-su); }
.tk-ozellik-bolum > h2::before { color: #fff; }
.tk-ozellik-bolum > h2::after { background-image: radial-gradient(circle at 10px -3px, var(--tk-su) 10px, transparent 10.5px); }
.tk-icerik h3 { font-size: 18px; margin: 20px 0 8px; padding: 0 0 6px 14px; border-left: 5px solid var(--tk-pvc); border-bottom: 1px solid var(--tk-cizgi); }
.tk-h1-aciklama { font-size: 16px; margin: 0 0 8px; }

.tk-damla-liste { list-style: none; padding: 0; }
.tk-damla-liste li { position: relative; padding: 5px 0 5px 28px; }
.tk-damla-liste li::before { content: "\f043"; position: absolute; left: 6px; top: 5px; font: 16px/27px FontAwesome; color: var(--tk-su); }

/* CTA: damlalı su kutusu */
.tk-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--tk-kobalt), var(--tk-su));
  border-radius: 40px 10px 40px 10px;
}
.tk-cta-damla { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: #fff; color: var(--tk-kobalt); font-size: 24px; }
.tk-cta-damla .fa { transform: rotate(45deg); }
.tk-cta p { margin: 0; color: #fff; font-family: var(--tk-baslik); font-size: 18px; font-weight: 700; line-height: 1.5; }
.tk-cta a { color: #ffe0c2 !important; white-space: nowrap; }

/* Açma raporu */
.tk-rapor { border: 2px solid var(--tk-kobalt); border-radius: 10px; overflow: hidden; background: #fff; }
.tk-rapor-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tk-silindir-pvc); color: #fff; font-family: var(--tk-baslik); font-weight: 700; letter-spacing: 1.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.tk-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tk-tablo th { width: 44%; text-align: left; padding: 9px 16px; background: var(--tk-su-acik); color: var(--tk-kobalt-koyu); font-weight: 700; border-bottom: 1px solid #cfe3f0; }
.tk-tablo td { padding: 9px 16px; border-bottom: 1px solid var(--tk-cizgi); }
.tk-tablo tr:last-child th, .tk-tablo tr:last-child td { border-bottom: 0; }
.tk-ikon { color: var(--tk-pvc); margin-right: 4px; }

/* SSS: boru eklemli sekmeler */
.tk-soru {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 50px 12px 36px;
  border: 1px solid #c3ced6;
  border-radius: 24px;
  background: linear-gradient(90deg, var(--tk-pvc) 0 16px, transparent 16px), var(--tk-silindir);
  color: var(--tk-kobalt-koyu);
  font: 700 15px var(--tk-govde);
  text-align: left;
  cursor: pointer;
}
.tk-soru::after { content: "\f0ad"; position: absolute; right: 16px; top: 50%; margin-top: -11px; font: 18px/22px FontAwesome; color: var(--tk-kobalt); transition: transform 0.4s; }
.tk-soru:hover { filter: brightness(1.03); }
.tk-soru.tk-acik { margin-bottom: 0; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, var(--tk-pvc) 0 16px, transparent 16px), var(--tk-kobalt); color: #fff; }
.tk-soru.tk-acik::after { transform: rotate(-90deg); color: #fff; }
.tk-cevap { margin: 0 0 10px; padding: 4px 20px 4px 36px; border: 1px solid #c3ced6; border-top: 0; border-radius: 0 0 16px 16px; background: var(--tk-su-acik); }

/* Hizmet kartları: boru ağzı çerçeveli */
.tk-hat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 18px; margin: 18px 0 10px; }
@media (max-width: 700px) { .tk-hat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } }
.tk-hat { display: flex; flex-direction: column; align-items: center; color: var(--tk-kobalt-koyu) !important; text-decoration: none !important; }
.tk-hat-gorsel { display: block; width: 100%; padding: 7px; border-radius: 16px; background: var(--tk-silindir); box-shadow: inset 0 0 0 1px #9aa7b1; box-sizing: border-box; }
.tk-hat img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; transition: transform 0.3s; }
.tk-hat-ad {
  position: relative;
  margin-top: -16px;
  padding: 7px 16px;
  border-radius: 30px;
  background: var(--tk-silindir-pvc);
  color: #fff;
  font-family: var(--tk-baslik);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.tk-hat:nth-child(even) .tk-hat-ad { background: linear-gradient(180deg, #4a9be0 0%, var(--tk-kobalt) 50%, #094580 60%, #2c80cc 100%); }
.tk-hat:hover img { transform: scale(0.97); }

/* Bilgi kutuları: damla ikon */
.tk-bilgi-satir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
@media (max-width: 700px) { .tk-bilgi-satir { grid-template-columns: 1fr; } }
.tk-bilgi { background: var(--tk-beyaz); border: 1px solid var(--tk-cizgi); border-radius: 10px; box-shadow: var(--tk-golge); padding: 26px 18px 18px; text-align: center; }
.tk-damla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  background: var(--tk-kobalt);
  color: #fff;
  font-size: 20px;
}
.tk-damla .fa { transform: rotate(45deg); }
.tk-bilgi:nth-child(2) .tk-damla { background: var(--tk-su); }
.tk-bilgi:nth-child(3) .tk-damla { background: var(--tk-pvc); }
.tk-bilgi h3 { margin: 0 0 6px !important; font-size: 17px !important; border: 0 !important; padding: 0 !important; }
.tk-bilgi p { margin: 0; font-size: 14px; }

/* Üçlü liste */
.tk-uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 14px 0 4px; }
@media (max-width: 700px) { .tk-uclu { grid-template-columns: 1fr; } }
.tk-kutu { background: #fff; border: 1px solid var(--tk-cizgi); border-radius: 10px; overflow: hidden; }
.tk-kutu h4 { margin: 0 0 6px; padding: 11px 14px; font-size: 14.5px; color: #fff; background: var(--tk-kobalt); border-bottom: 5px solid var(--tk-su); }
.tk-kutu:nth-child(2) h4 { background: var(--tk-kobalt-koyu); border-bottom-color: var(--tk-pvc); }
.tk-kutu:nth-child(3) h4 { background: var(--tk-su); border-bottom-color: var(--tk-kobalt); }
.tk-kutu h4 .fa { margin-right: 8px; }
.tk-kutu ul, .tk-kutu ol { list-style: none; margin: 0; padding: 6px 14px; }
.tk-kutu li { position: relative; padding: 6px 0 6px 22px; border-bottom: 1px dashed var(--tk-cizgi); font-size: 14px; }
.tk-kutu li:last-child { border-bottom: 0; }
.tk-kutu ul li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 9px; height: 9px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--tk-su); }
.tk-kutu-sirali ol { counter-reset: acma; }
.tk-kutu-sirali li { counter-increment: acma; }
.tk-kutu-sirali li::before { content: counter(acma); position: absolute; left: 0; top: 8px; width: 17px; height: 17px; border-radius: 50%; background: var(--tk-pvc); color: #fff; font: 700 11px/17px Arial, sans-serif; text-align: center; }

/* Özellikler: rögar kapağı rozetleri */
.tk-ozellik-bolum { text-align: center; }
.tk-ozellik-aciklama { max-width: 620px; margin: 0 auto 18px; }
.tk-ozellikler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 600px) { .tk-ozellikler { grid-template-columns: repeat(2, 1fr); } }
.tk-ozellik span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(0, 0, 0, 0.3) 8px 10px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 0, 0, 0.3) 8px 10px),
    var(--tk-dokum);
  border: 4px solid #1f262c;
  box-shadow: 0 0 0 3px var(--tk-su);
  color: #fff;
  font-size: 24px;
  transition: transform 0.5s;
}
.tk-ozellik span .fa { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tk-kobalt); }
.tk-ozellik:hover span { transform: rotate(180deg); }
.tk-ozellik b { font-family: var(--tk-baslik); font-size: 15px; color: var(--tk-kobalt-koyu); }

/* İlçeler */
.tk-ilceler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 8px; }
@media (max-width: 700px) { .tk-ilceler { grid-template-columns: repeat(2, 1fr); } }
.tk-ilceler a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--tk-su-acik);
  border: 1px solid #cfe3f0;
  border-radius: 30px;
  color: var(--tk-kobalt-koyu) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s;
}
.tk-ilceler a small { display: block; font-size: 9.5px; letter-spacing: 1.4px; color: var(--tk-pvc-koyu); font-weight: 700; }
.tk-mini-damla { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--tk-su); }
.tk-ilceler a:hover { background: #fff; border-color: var(--tk-su); }

/* Yan menü (sağda) */
.tk-yan-gorsel { position: relative; line-height: 0; }
.tk-rozet {
  position: absolute;
  right: 14px;
  bottom: -26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 0, 0, 0.3) 7px 9px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, 0.3) 7px 9px),
    var(--tk-dokum);
  border: 4px solid var(--tk-pvc);
  color: #fff;
  font: 700 10px/1.2 Arial, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
.tk-rozet b { font-family: var(--tk-baslik); font-size: 20px; color: #9fdcf7; }
.tk-yan-ic { padding: 20px 16px 6px; }
.tk-yan-ic p { margin: 8px 0; font-size: 14px; }
.tk-not { display: flex; flex-direction: column; margin: 18px 0 14px; padding: 14px 16px; background: var(--tk-su-acik); border-radius: 30px 8px 30px 8px; border: 1px solid #cfe3f0; color: #22384a; }
.tk-not strong { font-family: var(--tk-baslik); font-size: 15px; color: var(--tk-kobalt); }
.tk-not small { font-size: 13px; line-height: 1.6; }
.tk-yan-altbaslik { text-align: center; font-family: var(--tk-baslik); font-size: 15px !important; font-weight: 700; letter-spacing: 0.8px; color: var(--tk-kobalt); margin-top: 4px !important; }
.tk-bar-ad { font-weight: 700; color: var(--tk-kobalt-koyu); margin: 10px 0 4px !important; }
.tk-bar { height: 18px; border-radius: 9px; background: var(--tk-silindir); box-shadow: inset 0 0 0 1px #aab6bf; overflow: hidden; }
.tk-bar span {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, var(--tk-su) 0 16px, #5cc2ee 16px 22px);
  background-size: 44px 100%;
  animation: tk-ak 2.5s linear infinite;
  color: #fff;
  font: 700 11px/18px Arial, sans-serif;
  text-align: right;
  padding-right: 8px;
  box-sizing: border-box;
}
.tk-yan-ic .tk-bar:nth-of-type(2) span { background-image: repeating-linear-gradient(90deg, var(--tk-kobalt) 0 16px, #1a6db8 16px 22px); }
.tk-yan-ic .tk-bar:nth-of-type(3) span { background-image: repeating-linear-gradient(90deg, var(--tk-pvc) 0 16px, #ff9a3d 16px 22px); }
.tk-liste-baslik { position: relative; margin: 18px 0 0; padding: 12px 16px; background: var(--tk-kobalt); color: #fff; font-family: var(--tk-baslik); font-size: 14.5px; font-weight: 700; letter-spacing: 0.5px; border-bottom: 5px solid var(--tk-pvc); }
.tk-liste-baslik .fa { color: var(--tk-su); margin-right: 5px; }
.tk-yan-liste { list-style: none; margin: 0; padding: 0 0 6px; }
.tk-yan-liste li { position: relative; padding: 8px 16px 8px 34px; border-bottom: 1px dashed var(--tk-cizgi); font-size: 14px; }
.tk-yan-liste li::before { content: ""; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--tk-su); }
.tk-yan-liste li:hover { background: var(--tk-su-acik); }
.tk-yan-liste a { color: var(--tk-yazi); }
.tk-yan-liste b { color: var(--tk-kobalt); }
.tk-afis { margin-bottom: 24px; line-height: 0; padding: 8px; border-radius: 12px; background: var(--tk-silindir); box-shadow: var(--tk-golge); }
.tk-afis img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Footer */
.tk-footer { margin-top: 10px; background: var(--tk-kobalt-koyu); color: #a9c4da; text-align: center; padding: 0 0 86px; }
.tk-footer-ust { margin: 18px 16px 6px; color: #fff; font-family: var(--tk-baslik); font-size: 17px; font-weight: 700; }
.tk-footer-ust a { color: #ffb066; }
.tk-footer-yasal { max-width: 56rem; margin: 0 auto; padding: 0 16px 18px; font-size: 13px; line-height: 1.8; }

/* Sabit ara butonu: mobilde kobalt alt bar, masaüstünde sağ altta rögar kapağı */
.tk-ara-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; pointer-events: none; }
.tk-ara-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  background: var(--tk-kobalt);
  border-top: 4px solid var(--tk-su);
  color: #fff !important;
  text-decoration: none !important;
}
.tk-ara-kapak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0, 0, 0, 0.3) 5px 7px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0, 0, 0, 0.3) 5px 7px),
    var(--tk-dokum);
  border: 2px solid var(--tk-pvc);
  font-size: 18px;
}
.tk-ara-metin { display: flex; flex-direction: column; line-height: 1.2; }
.tk-ara-metin small { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #9fdcf7; }
.tk-ara-metin strong { font-family: var(--tk-baslik); font-size: 20px; }
@media (min-width: 993px) {
  .tk-ara-bar { left: auto; right: 28px; bottom: 26px; }
  .tk-ara-btn { position: relative; padding: 0 22px 0 0; gap: 0; border: 0; border-radius: 50px; background: var(--tk-kobalt); box-shadow: 0 12px 22px rgba(6, 44, 79, 0.4); transition: transform 0.2s; }
  .tk-ara-kapak { width: 72px; height: 72px; margin: -6px 14px -6px -6px; border: 4px solid #1f262c; box-shadow: 0 0 0 3px var(--tk-pvc); font-size: 26px; }
  .tk-ara-btn::before { content: ""; position: absolute; left: 30px; top: 30px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tk-su); animation: tk-halka 2s ease-out infinite; pointer-events: none; }
  .tk-ara-btn:hover { transform: translateY(-3px); }
  .tk-ara-btn:hover .tk-ara-kapak { animation: tk-don 1.5s linear infinite; }
  .tk-ara-metin { padding: 8px 0; }
  .tk-footer { padding-bottom: 20px; }
}
@keyframes tk-halka {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(8); opacity: 0; }
}

/* Duyuru penceresi: boru çerçeveli */
.tk-duyuru { display: none; }
@media (min-width: 992px) {
  .tk-duyuru:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 24px; }
  .tk-duyuru-arka { position: absolute; inset: 0; background: rgba(6, 44, 79, 0.75); }
  .tk-duyuru-kutu {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 46px 34px 26px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
    color: var(--tk-yazi);
    box-shadow: 0 0 0 12px #c9d2d9, 0 0 0 14px #8d99a6, 0 26px 40px rgba(0, 0, 0, 0.45);
  }
  .tk-duyuru-dirsek { position: absolute; top: -18px; width: 30px; height: 30px; border-radius: 6px; background: var(--tk-silindir-pvc); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
  .tk-duyuru-dirsek.s { left: -18px; }
  .tk-duyuru-dirsek.g { right: -18px; }
  .tk-duyuru-damla { position: absolute; left: 50%; top: -30px; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-left: -29px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--tk-su); color: #fff; font-size: 26px; box-shadow: 0 0 0 5px #fff; }
  .tk-duyuru-damla .fa { transform: rotate(45deg); }
  .tk-duyuru-kutu h2 { margin: 0 0 12px; font-size: 24px; color: var(--tk-kobalt-koyu); }
  .tk-duyuru-kutu p { margin: 0 0 8px; }
  .tk-duyuru-not { margin-top: 12px !important; padding-top: 10px; border-top: 1px dashed var(--tk-cizgi); font-size: 13px; color: #4f6273; }
  .tk-duyuru-btn { margin-top: 12px; padding: 10px 30px; border: 0; border-radius: 30px; background: var(--tk-silindir-pvc); color: #fff; font: 700 15px "Trebuchet MS", sans-serif; letter-spacing: 0.5px; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 0 var(--tk-pvc-koyu); }
  .tk-duyuru-btn:hover { filter: brightness(1.08); }
  body.tk-duyuru-acik { overflow: hidden; }
}