/* ==========================================================================
   ui-craft.css — ÜrolojiTeam tasarim cilasi katmani
   --------------------------------------------------------------------------
   Kaynak: ui-craft.skill (Emil Kowalski · Jakub Krehel · Motion · beUI)

   Bu dosya temanin CSS'ini DEGISTIRMEZ, en son yuklendigi icin uzerine
   yazar. Boylece geri almak tek satirlik is: _head.html icindeki
   ui-craft.css satirini silmek yeterli.

   Uygulanan kurallar:
     - Her animasyon kendini gerekcelendirir; sonsuz dongu yok
     - Enter/exit = ease-out, asla ease-in
     - UI animasyonlari < 300ms
     - Sadece transform / opacity / filter animasyonu (GPU)
     - transition: all yok — hangi ozellik degisiyorsa o yazili
     - Hicbir sey scale(0)'dan buyumez
     - Hover motion sadece gercek isaretleyici cihazlarda
     - prefers-reduced-motion: hareket kalkar, renk/opaklik kalir
     - Ic ice yariciap: outerRadius = innerRadius + padding
     - Derinlik icin katmanli golge, cizgi icin border
   ========================================================================== */

:root {
  /* --- Hareket --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-press: 120ms;   /* buton basma geri bildirimi */
  --dur-hover: 160ms;   /* hover renk/golge */
  --dur-panel: 200ms;   /* dropdown, accordion */

  /* --- Yuzeyler: cizgi yerine katmanli golge --- */
  --shadow-border:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-border-hover:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 10px -2px rgba(0, 0, 0, 0.10),
    0 10px 24px -6px rgba(0, 0, 0, 0.10);

  /* --- Yariciap olcegi (ic ice icin) --- */
  --r-inner: 10px;
  --r-card: 16px;   /* 10 + 6px padding */
  --r-pill: 999px;

  --ink: #1d2430;
  --ink-soft: #55607a;
  --hair: #e6ecf2;
}

/* --------------------------------------------------------------------------
   1. Tipografi olculeri
   -------------------------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Basliklar: satirlar esit dagilir, tek kelime sarkmaz */
h1, h2, h3,
.section-title .title,
.page-title-heading .title,
.featured-title h2,
.featured-title h3,
.widget-title {
  text-wrap: balance;
}

/* Govde metni: son satirda yalniz kelime birakmaz */
p, li, figcaption, blockquote, .featured-desc, .title-desc,
.page-title-desc, .cmt-faq-answer {
  text-wrap: pretty;
}

/* Icerik alaninda okunabilir satir uzunlugu ve ritim */
.icerik {
  color: var(--ink);
  line-height: 1.75;
}
.icerik > p { margin-bottom: 1.15em; }
.icerik h2 { margin-top: 1.9em; margin-bottom: .5em; line-height: 1.25; }
.icerik h3 { margin-top: 1.5em; margin-bottom: .4em; line-height: 1.3; }
.icerik h2:first-child,
.icerik h3:first-child { margin-top: 0; }
.icerik ul, .icerik ol { margin-bottom: 1.15em; padding-left: 1.25em; }
.icerik li + li { margin-top: .35em; }

/* Metin icindeki baglantilar govdeden ayirt edilebilir olmali */
.icerik a:not([class]) {
  color: #0636a3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition-property: color, text-decoration-color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.icerik a:not([class]):hover { color: #9e2c00; }

/* Tablo: ic ice yariciap yerine duz ayirici cizgiler (dogru kullanim) */
.icerik table { border-collapse: collapse; width: 100%; margin-bottom: 1.4em; }
.icerik th, .icerik td { border-bottom: 1px solid var(--hair); padding: .6em .75em; text-align: left; }
.icerik th { font-weight: 600; }

/* --------------------------------------------------------------------------
   2. Sayfa basligi / breadcrumb
   H2 -> H1 degisikliginin gorsel karsiligi: baslik artik hiyerarsinin
   tepesi gibi duruyor.
   -------------------------------------------------------------------------- */

.page-title-heading .title {
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: .35rem;
}
.page-title-desc { opacity: .85; }

.cmt-kicker {
  margin-bottom: .75rem;
  line-height: 1;
}
.cmt-kicker img { display: inline-block; }

.breadcrumb-wrapper-inner span + span::before {
  content: "/";
  margin: 0 .5em;
  opacity: .45;
}
.breadcrumb-wrapper-inner a {
  text-decoration: none;
  transition-property: opacity;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.breadcrumb-wrapper-inner a:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   3. Kartlar — cizgi yerine golge, ic ice dogru yariciap
   -------------------------------------------------------------------------- */

.featured-imagebox,
.featured-imagebox-portfolio,
.featured-imagebox-team,
.cmt-box-shadow,
.table-of-content {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-border);
  border: 0;
  background: #fff;
  overflow: hidden;
  /* transition: all DEGIL — sadece degisen ozellik */
  transition-property: box-shadow, transform;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}

/* Kartin ici: outerRadius(16) - padding(6) = 10px */
.featured-thumbnail,
.featured-thumbnail-inner {
  border-radius: var(--r-inner);
  overflow: hidden;
}

.featured-content { padding: 18px 20px 20px; }
.featured-title h2,
.featured-title h3 { margin-bottom: .25rem; line-height: 1.35; }
.featured-title a { text-decoration: none; }

.featured-desc .portfolio_category {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   4. Gorseller — 1px inset outline (kesin renk: saf siyah %10)
   -------------------------------------------------------------------------- */

.icerik img,
.cmt_single_image-wrapper img,
.ttm_single_image-wrapper img,
.featured-thumbnail-inner img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  border-radius: var(--r-inner);
}
/* Logolar ve ikonlar cerceve almaz — cerceve kirlilik gibi okunur */
.cmt-kicker img,
#logo-img,
#footer-logo-img,
.cmt-icon img,
.social-icons img {
  outline: 0;
  border-radius: 0;
}

.icerik img { max-width: 100%; height: auto; }

/* Kartin kendi yariciapi var, icindeki gorsel kosede tasmasin */
.featured-thumbnail-inner img { border-radius: 0; }

/* --------------------------------------------------------------------------
   5. Butonlar — basma geri bildirimi pointer-DOWN'da
   -------------------------------------------------------------------------- */

.cmt-btn,
button.submit,
.cmt-page-link {
  border-radius: var(--r-pill);
  /* Ikon tarafi padding = metin tarafi - 2px (optik hizalama) */
  transition-property: transform, box-shadow, background-color, color;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
  will-change: auto;
}
.cmt-btn:active,
button.submit:active,
.cmt-page-link:active {
  /* scale(0.96) — asla 0.95 altina inmez, abartili durur */
  transform: scale(0.96);
}
.cmt-btn-shape-square { border-radius: var(--r-inner); }

.cmt-btn.btn-inline {
  border-radius: 0;
  padding-inline: 0;
}

/* Metin + ikon iceren buton: ikon tarafinda 2px daha az bosluk */
.cmt-btn > i,
.cmt-btn > svg { margin-left: .5em; margin-right: -2px; }

/* --------------------------------------------------------------------------
   6. Klavye odagi — gorunur, her yerde
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0636a3;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Fare ile tiklamada halka gorunmez (tarayici varsayilanini bastir) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10000;
  background: #0636a3;
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-inner);
  text-decoration: none;
  transition-property: transform;
  transition-duration: var(--dur-panel);
  transition-timing-function: var(--ease-out);
}
.skip-link:focus { transform: translateY(80px); color: #fff; }

/* Ekran okuyucu metni */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. Formlar
   -------------------------------------------------------------------------- */

.wrap-form input[type="text"],
.wrap-form input[type="email"],
.wrap-form input[type="tel"],
.wrap-form textarea {
  border-radius: var(--r-inner);
  /* Form alanlarinda cizgi kalir — erisilebilirlik icin dogru olan bu */
  border: 1px solid var(--hair);
  min-height: 46px;
  transition-property: border-color, box-shadow;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.wrap-form textarea { min-height: 120px; }
.wrap-form input:focus,
.wrap-form textarea:focus {
  border-color: #0636a3;
  box-shadow: 0 0 0 3px rgba(6, 54, 163, 0.12);
}
.wrap-form label { display: block; margin-bottom: 14px; }

.form-messages.alert-success { color: #0f5132; }
.form-messages.alert-error { color: #842029; }

/* --------------------------------------------------------------------------
   8. SSS (details/summary) — accordion
   Keyframe degil transition: yarida kesilirse geri doner.
   -------------------------------------------------------------------------- */

.cmt-faq-list {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-border);
  overflow: hidden;
  background: #fff;
}
.cmt-faq-item + .cmt-faq-item { border-top: 1px solid var(--hair); }

.cmt-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  position: relative;
  font-weight: 600;
  color: var(--ink);
  /* Dokunmatikte 44px hedef alan */
  min-height: 44px;
  transition-property: background-color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.cmt-faq-item > summary::-webkit-details-marker { display: none; }

.cmt-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition-property: transform, opacity;
  transition-duration: var(--dur-panel);
  transition-timing-function: var(--ease-out);
}
.cmt-faq-item[open] > summary::after {
  transform: rotate(-135deg);
  opacity: .8;
}

.cmt-faq-answer {
  padding: 0 20px 20px;
  color: var(--ink-soft);
  line-height: 1.7;
}
/* Acilirken: hicbir sey yoktan var olmaz — opacity + 6px kayma */
.cmt-faq-item[open] > .cmt-faq-answer {
  animation: cmt-reveal 200ms var(--ease-out) both;
}
@keyframes cmt-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   9. Ilgili icerik listeleri
   -------------------------------------------------------------------------- */

.cmt-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-border);
  overflow: hidden;
  background: #fff;
}
.cmt-related-list li + li { border-top: 1px solid var(--hair); }
.cmt-related-list a {
  display: block;
  padding: 14px 20px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  transition-property: background-color, color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}

@media (min-width: 768px) {
  .cmt-related-list-2col {
    columns: 2;
    column-gap: 0;
  }
  .cmt-related-list-2col li { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   10. Sayfalama (blog)
   -------------------------------------------------------------------------- */

.cmt-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}
.cmt-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Yogun masaustu UI'da bile en az 40x40 */
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-border);
}
.cmt-page-link.is-current {
  background: #0636a3;
  color: #fff;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. Hekim kunyesi (blog-detay)
   -------------------------------------------------------------------------- */

.cmt-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.cmt-byline a { color: var(--ink); font-weight: 600; text-decoration: none; }
.cmt-byline a:hover { text-decoration: underline; }
.cmt-byline-sep { opacity: .4; }
.cmt-byline time { font-variant-numeric: tabular-nums; }

.cmt-doctor-role {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Icindekiler (TOC)
   -------------------------------------------------------------------------- */

.table-of-content { box-shadow: var(--shadow-border); border: 0; }
.table-of-content:empty { display: none; }
.table-of-content .title { text-align: left; font-weight: 600; }
.table-of-content a {
  text-decoration: none;
  transition-property: color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}

/* Sabit baslik yoksa da baglanti hedefleri tepeye yapismasin */
[id] { scroll-margin-top: 24px; }

/* --------------------------------------------------------------------------
   13. Kayan sosyal butonlar
   RAPOR DISI ama craft ihlali: bu butonlarda sonsuz "wave" animasyonu
   (4s + 2s, iteration-count: infinite) ve hover'da rotate(360deg)
   scale(1.2) vardi. Kullanicinin her saniye gordugu bir ogede sonsuz
   hareket gecerli bir amaca hizmet etmez ve GPU'yu bos mesgul eder.
   Dalga 3 tekrarla sinirlandi, hover donmesi kaldirildi.
   -------------------------------------------------------------------------- */

.fixed-social-item {
  width: 48px;
  height: 48px;
  transition-property: transform, box-shadow;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.fixed-social-item::before,
.fixed-social-item::after {
  width: 48px;
  height: 48px;
  animation-iteration-count: 3;
}
.fixed-social-item:active { transform: scale(0.96); }

/* Hover hareketi sadece gercek isaretleyicide — dokunmatikte hayalet
   hover tetiklenmesin */
@media (hover: hover) and (pointer: fine) {
  .fixed-social-item:hover {
    /* eski: rotate(360deg) scale(1.2) */
    transform: scale(1.06);
  }
  .featured-imagebox:hover,
  .featured-imagebox-portfolio:hover,
  .featured-imagebox-team:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-border-hover);
  }
  .cmt-btn:hover { transform: translateY(-1px); }
  .cmt-related-list a:hover { background: #f5f8fc; color: #0636a3; }
  .cmt-faq-item > summary:hover { background: #f5f8fc; }
  .cmt-page-link:hover { box-shadow: var(--shadow-border-hover); }
}

/* --------------------------------------------------------------------------
   14. Dokunma hedefi — 44x44
   -------------------------------------------------------------------------- */

.main-menu .menu > li > a,
.social-icons a,
.widget_contact_wrapper a,
.mega-submenu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.social-icons a { min-width: 44px; justify-content: center; }

#totop {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  transition-property: transform, opacity;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
#totop:active { transform: scale(0.96); }

/* Uzman menusu uzun liste: kaydirma cubugu gorunur ve ince */
.mega-submenu.punch {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   15. Tema animasyonlarinin budanmasi
   animate.css tema genelinde uzun (>300ms) giris animasyonlari
   uyguluyor. Sayfa yuklenirken gorulen bir animasyon, kullanicinin en
   dikkatli oldugu ani geciktirir.
   -------------------------------------------------------------------------- */

.animated {
  animation-duration: 280ms !important;
  animation-timing-function: var(--ease-out) !important;
}

/* transition: all kullanan tema kurallarini daralt */
.cmt-icon,
.widget_info,
.featured-icon-box {
  transition-property: transform, box-shadow, background-color, color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}

/* --------------------------------------------------------------------------
   16. Hareketi azalt
   Sifir degil: renk ve opaklik kalir, yer degistirme kalkar.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fixed-social-item::before,
  .fixed-social-item::after { display: none; }
  .fixed-social-item:hover,
  .featured-imagebox:hover,
  .featured-imagebox-portfolio:hover,
  .featured-imagebox-team:hover,
  .cmt-btn:hover { transform: none; }
  /* Renk geri bildirimi korunur */
  .cmt-related-list a:hover { background: #f5f8fc; }
}

/* --------------------------------------------------------------------------
   17. Baski
   -------------------------------------------------------------------------- */

@media print {
  .fixed-social, .hotline-phone-ring-wrap, #totop,
  .widget-area, .cmt-page-title-row .breadcrumb-wrapper { display: none; }
  .icerik a::after { content: " (" attr(href) ")"; font-size: .85em; }
}